我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
最简单的方法是在包含元素上设置position: relative，在容器内的工具提示元素上设置position: absolute，使其相对于父元素(包含元素)浮动。例如:
<div style="background: yellow;">
<div style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
<div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
Tooltip text
</div>
</div>
</div>
其他回答
您可以尝试引导工具提示。
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
进一步阅读
你根本不需要JavaScript;只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。
在堆栈片段中的演示
<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >
我为它创造了一个公式。 首先是html
<div class="tooltip-container">
<button class="tooltip-tarjet">
My Button
</button>
<div class="tooltip-element">
This is my tooltip content right here...
</div>
</div>
现在是它的css
.tooltip-container {
/* it contains the tooltip message and the one firing the tooltip
* it has position relative since it allows for a better responsive positioning
* of the tooltip-element */
display: inline-block;
position: relative;
flex-direction: row;
}
.tooltip-tarjet:hover + .tooltip-element {
/* this selector rule matches the tooltip-element right after
* tooltip-tarjet at a hover action
* */
display: inline-block;
position: absolute;
background-color: #869096;
color: white;
opacity: 1;
transition: all 1s;
}
.tooltip-element {
/* here goes the tooltip-element styles and positioning, now your
* tooltip element will always remain to your desired positionno matter
* the screen size at hand
* */
display: none;
opacity: 0;
text-align: center;
padding: 7px;
z-index: 10;
width: 200px;
left: -60px;
bottom: 48px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-size: 12px;
line-height: 1.5;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tooltip</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$("#tooltip").tooltip();
});
</script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>
您还可以自定义工具提示样式。请参阅此连结: http://jqueryui.com/tooltip/#custom-style
您可以使用数据属性，伪元素和内容创建自定义CSS工具提示:attr()等。
http://jsfiddle.net/clintioo/gLeydk0k/11/
<div data-tooltip="This is my tooltip">
<label>Name</label>
<input type="text" />
</div>
.
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid orange;
border-bottom: 5px solid transparent;
}
input[type="text"] {
width: 125px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
