我有一个像这样的 div 标签：
<div>
<label>Name</label>
<input type="text"/>
</div>
如何:hover在 div上显示工具提示，最好具有淡入/淡出效果。
向 div 添加工具提示
IT技术
javascript
html
css
tooltip
2021-01-16 00:34:02
6个回答
对于基本工具提示，您需要：
<div title="This is my tooltip">
喜欢：
.visible {
height: 3em;
width: 10em;
background: yellow;
}<div title="This is my tooltip" class="visible"></div>对于更高级的 javascript 版本，您可以查看：
https://jqueryhouse.com/best-jquery-tooltip-plugins/
上面的链接为您提供了 25 个工具提示选项。
这是可以做到只用CSS，JavaScript的没有在所有：运行演示
应用自定义 HTML 属性，例如。
data-tooltip="bla bla"到您的对象（div 或其他）：<div data-tooltip="bla bla"> something here </div>将
:before每个[data-tooltip]对象的伪元素定义为透明、绝对定位且以data-tooltip=""value 为内容：[data-tooltip]:before { position : absolute; content : attr(data-tooltip); opacity : 0; }定义
:hover:before每个悬停状态[data-tooltip]以使其可见：[data-tooltip]:hover:before { opacity : 1; }将您的样式（颜色、大小、位置等）应用到工具提示对象；故事的结局。
在演示中，我定义了另一个规则来指定工具提示在悬停在它上面但在父级之外时是否必须消失，还有另一个自定义属性data-tooltip-persistent，和一个简单的规则：
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}
注 1：浏览器对此的覆盖范围非常广泛，但请考虑对旧 IE 使用 javascript 回退（如果需要）。
注 2：增强功能可能是添加一些 javascript 来计算鼠标位置并将其添加到伪元素中，方法是更改应用于它的类。
你根本不需要 JavaScript；只需设置title属性：
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的视觉呈现取决于浏览器/操作系统，因此它可能会淡入，也可能不会。但是，这是制作工具提示的语义方式，它可以与屏幕阅读器等辅助功能软件一起正常工作。
堆栈片段中的演示
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>这是一个纯 CSS 3实现（带有可选的 JS）
您唯一需要做的就是在任何名为“data-tooltip”的 div 上设置一个属性，当您将鼠标悬停在它上面时，该文本将显示在它旁边。
我已经包含了一些可选的 JavaScript，它们会导致工具提示显示在光标附近。如果您不需要此功能，则可以放心地忽略此小提琴的 JavaScript 部分。
如果您不想在悬停状态上淡入，只需删除过渡属性。
它的样式类似于title属性工具提示。这是 JSFiddle：http : //jsfiddle.net/toe0hcyn/1/
HTML 示例：
<div data-tooltip="your tooltip message"></div>
CSS：
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}
用于基于鼠标位置的工具提示位置更改的可选 JavaScript：
var style = document.createElement('style');
document.head.appendChild(style);
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
var attr = allElements[i].getAttribute('data-tooltip');
if (attr) {
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event) {
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
}
这是一个很好的 jQuery 工具提示：
要实现这一点，只需按照以下步骤操作：
将此代码添加到您的
<head></head>标签中：<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> $("[title]").tooltip(); </script> <style type="text/css"> /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; } </style>在您想要拥有工具提示的 HTML 元素上，只需
title为其添加一个属性即可。title 属性中的任何文本都将出现在工具提示中。
注意：当 JavaScript 被禁用时，它将回退到默认浏览器/操作系统工具提示。