将工具提示添加到div

Question

我有这样的div标签：<div>  <label>Name</label>  <input type="text"/></div>如何:hover在div 上显示工具提示，最好具有淡入/淡出效果。

Answer 1

这是可以做到与CSS只，没有JavaScript的根本：运行演示

应用自定义HTML属性，例如。tooltip="bla bla"到您的对象（div或其他）：

<div tooltip="bla bla">

    something here

</div>

将:before每个[tooltip]对象的伪元素定义为透明，绝对定位并以tooltip=""值作为内容：

[tooltip]:before {            

    position : absolute;

     content : attr(tooltip);

     opacity : 0;

}

定义:hover:before每一个的悬停状态[tooltip]以使其可见：

[tooltip]:hover:before {        

    opacity : 1;

}

将样式（颜色，大小，位置等）应用于工具提示对象；故事结局。

在演示中，我定义了另一条规则，以指定当工具提示悬停在工具提示上时，是否必须消失，但在父提示之外，具有另一个自定义属性tooltip-persistent和一个简单的规则：

[tooltip]:not([tooltip-persistent]):before {

    pointer-events: none;

}

注意1：为此，浏览器的覆盖范围非常广泛，但请考虑对旧IE使用javascript后备（如果需要）。

注意2：增强功能可能是添加一些JavaScript，以通过更改应用于鼠标的类来计算鼠标位置并将其添加到伪元素中。

Answer 2

您根本不需要JavaScript。只需设置title属性：

<div title="Hello, World!">

  <label>Name</label>

  <input type="text"/>

</div>

请注意，工具提示的视觉呈现方式取决于浏览器/操作系统，因此它可能会淡入，而可能不会淡入。但是，这是进行工具提示的语义方式，并且可以与屏幕阅读器等辅助功能软件一起正常工作。

堆栈片段中的演示

<div title="Hello, World!">

  <label>Name</label>

  <input type="text"/>

</div>