html中的a标签的title问题

我现在在a标签上添加了title属性,用来提示这个链接的功能,现在我想要让这个title弹窗在鼠标hover的瞬间快速弹出,而不是在等1-2s后弹出,该怎么做

阅读 9.2k
4 个回答

最简单的方法用a标签的伪类去做一个假的提示,然后hover一下就ok

a:after{

contant = '我是提示';
display:none;

}
a:hover a:after{

display:block;

}

a::after{
  content:attr(title);
}
a:hover::after{
  display:block;
}

原生没有延迟属性,自己写一个tip组件吧。
思路:
mouseover的时候setTimeouttitle出现,mouseout的时候隐藏.

自己写一个方法呗,

  1. 在a标签上添加一个data-title, 比如<a href="aaa" data-title="aaa">aaa</a>

  2. 通过js遍历所有的节点,然后在a标签旁边生成一个tooltip的dom

  3. 通过css判断,如果a hover的话,显示tooltip。没有hover的话,隐藏tooltip

css类似这样子

a:hover + .tooltip {
  display: inline-block;
}

或者模仿bootstrap的tooltip写一个也行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题