html中的a标签的title问题

Question

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

Answer 1

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

a:after{

contant = '我是提示'；
display：none;

}
a:hover a:after{

display:block;

}

Answer 2

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

Answer 3

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

Answer 4

自己写一个方法呗，

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写一个也行