我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
它可以只用CSS，不需要javascript
运行演示
[data-tooltip]:before { /* needed - do not touch */ content: attr(data-tooltip); position: absolute; opacity: 0; /* customizable */ transition: all 0.15s ease; padding: 10px; color: #333; border-radius: 10px; box-shadow: 2px 2px 1px silver; } [data-tooltip]:hover:before { /* needed - do not touch */ opacity: 1; /* customizable */ background: yellow; margin-top: -50px; margin-left: 20px; } [data-tooltip]:not([data-tooltip-persistent]):before { pointer-events: none; } /* FOR TEST PURPOSES ONLY */ div { border: 1px solid silver; background: #ddd; margin: 20px; padding: 10px; } <div>Standard div, no tooltip here</div> <div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. <br/>Hovering the tooltip doesn't matter: <br/>if you hover out of my boundaries, the tooltip will disappear.</div> <div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip. <br/>The tooltip won't expire until you hover on me OR it.</div>
Apply a custom HTML attribute, eg. data-tooltip="bla bla" to your object (div or whatever): <div data-tooltip="bla bla"> something here </div> Define the :before pseudoelement of each [data-tooltip] object to be transparent, absolutely positioned and with data-tooltip="" value as content: [data-tooltip]:before { position : absolute; content : attr(data-tooltip); opacity : 0; } Define :hover:before hovering state of each [data-tooltip] to make it visible: [data-tooltip]:hover:before { opacity : 1; } Apply your styles (color, size, position etc) to the tooltip object; end of the story.
在演示中，我定义了另一个规则来指定当鼠标悬停在工具提示上但不在父工具提示上时，工具提示是否必须消失，使用另一个自定义属性data-tooltip-persistent和一个简单的规则:
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}
注1:浏览器的覆盖范围很广，但可以考虑为旧的IE使用javascript回退(如果需要的话)。
注2:一种增强可能是添加一些javascript来计算鼠标位置，并通过改变应用于它的类将其添加到伪元素中。
其他回答
工具提示定位纯css
div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ text-align: center; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; //text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } .toolLeft { top: -5px; right: 105%; } .toolRight { top: -5px; left: 105%; } .toolTop { bottom: 100%; left: 50%; margin-left: -60px; } .toolBottom { top: 100%; left: 50%; margin-left: -60px; } <div> <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br /> <div class="tooltip">Left <span class="tooltiptext toolLeft">Tooltip text</span></div><br /> <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br /> <div class="tooltip">Bottom <span class="tooltiptext toolBottom">Tooltip text</span></div><br /> </div>
这是一个漂亮的jQuery工具提示:
https://jqueryui.com/tooltip/
要实现这一点，只需遵循以下步骤:
Add this code in your <head></head> tags: <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> On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.
注意:当JavaScript被禁用时，它将回退到默认的浏览器/操作系统工具提示。
<!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，不需要javascript
运行演示
[data-tooltip]:before { /* needed - do not touch */ content: attr(data-tooltip); position: absolute; opacity: 0; /* customizable */ transition: all 0.15s ease; padding: 10px; color: #333; border-radius: 10px; box-shadow: 2px 2px 1px silver; } [data-tooltip]:hover:before { /* needed - do not touch */ opacity: 1; /* customizable */ background: yellow; margin-top: -50px; margin-left: 20px; } [data-tooltip]:not([data-tooltip-persistent]):before { pointer-events: none; } /* FOR TEST PURPOSES ONLY */ div { border: 1px solid silver; background: #ddd; margin: 20px; padding: 10px; } <div>Standard div, no tooltip here</div> <div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. <br/>Hovering the tooltip doesn't matter: <br/>if you hover out of my boundaries, the tooltip will disappear.</div> <div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip. <br/>The tooltip won't expire until you hover on me OR it.</div>
Apply a custom HTML attribute, eg. data-tooltip="bla bla" to your object (div or whatever): <div data-tooltip="bla bla"> something here </div> Define the :before pseudoelement of each [data-tooltip] object to be transparent, absolutely positioned and with data-tooltip="" value as content: [data-tooltip]:before { position : absolute; content : attr(data-tooltip); opacity : 0; } Define :hover:before hovering state of each [data-tooltip] to make it visible: [data-tooltip]:hover:before { opacity : 1; } Apply your styles (color, size, position etc) to the tooltip object; end of the story.
在演示中，我定义了另一个规则来指定当鼠标悬停在工具提示上但不在父工具提示上时，工具提示是否必须消失，使用另一个自定义属性data-tooltip-persistent和一个简单的规则:
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}
注1:浏览器的覆盖范围很广，但可以考虑为旧的IE使用javascript回退(如果需要的话)。
注2:一种增强可能是添加一些javascript来计算鼠标位置，并通过改变应用于它的类将其添加到伪元素中。
你也可以使用这个作为工具提示…它的工作原理是一样的，但你必须写额外的标签。
<abbr title="THis is tooltip"></abbr>
