将工具提示添加到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">&nbsp; &nbsp; something here</div>将:before每个[tooltip]对象的伪元素定义为透明，绝对定位并以tooltip=""值作为内容：[tooltip]:before {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; position : absolute;&nbsp; &nbsp; &nbsp;content : attr(tooltip);&nbsp; &nbsp; &nbsp;opacity : 0;}定义:hover:before每一个的悬停状态[tooltip]以使其可见：[tooltip]:hover:before {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; opacity : 1;}将样式（颜色，大小，位置等）应用于工具提示对象；故事结局。在演示中，我定义了另一条规则，以指定当工具提示悬停在工具提示上时，是否必须消失，但在父提示之外，具有另一个自定义属性tooltip-persistent和一个简单的规则：[tooltip]:not([tooltip-persistent]):before {&nbsp; &nbsp; pointer-events: none;}注意1：为此，浏览器的覆盖范围非常广泛，但请考虑对旧IE使用javascript后备（如果需要）。注意2：增强功能可能是添加一些JavaScript，以通过更改应用于鼠标的类来计算鼠标位置并将其添加到伪元素中。

Answer 2

您根本不需要JavaScript。只需设置title属性：<div title="Hello, World!">&nbsp; <label>Name</label>&nbsp; <input type="text"/></div>请注意，工具提示的视觉呈现方式取决于浏览器/操作系统，因此它可能会淡入，而可能不会淡入。但是，这是进行工具提示的语义方式，并且可以与屏幕阅读器等辅助功能软件一起正常工作。堆栈片段中的演示<div title="Hello, World!">&nbsp; <label>Name</label>&nbsp; <input type="text"/></div>