我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
下面是一个简单的工具提示实现，它可以考虑鼠标的位置以及窗口的高度和宽度:
function showTooltip(e) { var tooltip = e.target.classList.contains("tooltip") ? e.target : e.target.querySelector(":scope .tooltip"); tooltip.style.left = (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth) ? (e.pageX + 10 + "px") : (document.body.clientWidth + 5 - tooltip.clientWidth + "px"); tooltip.style.top = (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight) ? (e.pageY + 10 + "px") : (document.body.clientHeight + 5 - tooltip.clientHeight + "px"); } var tooltips = document.querySelectorAll('.couponcode'); for(var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mousemove', showTooltip); } .couponcode { color: red; cursor: pointer; } .couponcode:hover .tooltip { display: block; } .tooltip { position: absolute; white-space: nowrap; display: none; background: #ffffcc; border: 1px solid black; padding: 5px; z-index: 1000; color: black; } Lorem ipsum dolor sit amet, <span class="couponcode">consectetur adipiscing<span class="tooltip">This is a tooltip</span></span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span class="couponcode">reprehenderit<span class="tooltip">This is another tooltip</span></span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est <span class="couponcode">laborum<span class="tooltip">This is yet another tooltip</span></span>.
(也可以参看这把小提琴)
其他回答
我做了一些事情，应该能够适应一个div以及。
HTML
<td>
<%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
<span class="showonhover">
<a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
<span class="hovertext">
<%# Eval("Name") %>
</span>
</span>
</td>
CSS
.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}
要了解更深入的讨论，请参阅我的文章:
一个简单的格式化工具提示文本悬停
这是一个漂亮的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被禁用时，它将回退到默认的浏览器/操作系统工具提示。
对于基本的工具提示，您需要:
<div title="This is my tooltip">
如:
.visible { 高度:3他们; 宽度:10 em; 背景:黄色; } <div title="This is my tooltip" class="visible"></div> .
对于一个更花哨的javascript版本，你可以查看:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
上面的链接提供了25个工具提示选项。
仅css3的解决方案可以是:
CSS3:
div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}
HTML5:
<div style="background: yellow;">
<div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
</div>
</div>
然后你可以用同样的方法创建一个tooltip-2 div…当然，您也可以使用title属性而不是data属性。
这是一个纯css3实现(可选JS)
你要做的唯一一件事就是在任何div上设置一个名为“data-tooltip”的属性，当你将鼠标悬停在它上面时，该文本将显示在它旁边。
我已经包含了一些可选的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 }'
}
