我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
你根本不需要JavaScript;只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。
在堆栈片段中的演示
<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >
其他回答
你可以用简单的css…Jsfiddle这里你可以看到这个例子
下面是工具提示的CSS代码
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
这是一个纯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 }'
}
你根本不需要JavaScript;只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。
在堆栈片段中的演示
<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >
我开发了三种类型的褪色效果:
/* setup tooltips */ .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; } .tooltip:after { border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,.75); border-left: 6px solid transparent; content: ''; height: 0; top: 20px; left: 20px; width: 0; } .tooltip:before { background: rgba(0,0,0,.75); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: 26px; white-space: nowrap; } /* the animations */ /* fade */ .tooltip.fade:after, .tooltip.fade:before { transform: translate3d(0,-10px,0); transition: all .15s ease-in-out; } .tooltip.fade:hover:after, .tooltip.fade:hover:before { opacity: 1; transform: translate3d(0,0,0); } /* expand */ .tooltip.expand:before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out; } .tooltip.expand:after { transform: translate3d(0,6px,0); transition: all .1s ease-in-out; } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1; transform: scale3d(1,1,1); } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } /* swing */ .tooltip.swing:before, .tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg); transform-origin: 0 0; transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:after { transform: translate3d(0,60px,0); transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:hover:before, .tooltip.swing:hover:after { opacity: 1; transform: translate3d(0,0,0) rotate3d(1,1,1,0deg); } /* basic styling: has nothing to do with tooltips: */ h1 { padding-left: 50px; } ul { margin-bottom: 40px; } li { cursor: pointer; display: inline-block; padding: 0 10px; } <h1>FADE</h1> <div class="tooltip fade" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>EXPAND</h1> <div class="tooltip expand" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>SWING</h1> <div class="tooltip swing" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div>
我做了一些事情，应该能够适应一个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;}
要了解更深入的讨论，请参阅我的文章:
一个简单的格式化工具提示文本悬停
