我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
<!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
其他回答
不使用任何API 你也可以通过使用纯CSS和Jquery演示来做这样的事情
HTML
<div class="pointer_tooltip">
Click & Drag to draw the area
</div>
CSS
.pointer_tooltip{
width : auto;
height : auto;
padding : 10px;
border-radius : 5px;
background-color : #fff;
position: absolute;
}
Jquery
$(document).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
//set the actuall width
$('.pointer_tooltip').width($('.pointer_tooltip').width());
var position_top = event.pageY+18;
var position_left = event.pageX-60;
var width=$('body').width()-$('.pointer_tooltip').width();
//check if left not minus
if(position_left<0){
position_left=10;
}else if(position_left > width){
position_left=width-10;
}
$('.pointer_tooltip').css('top',position_top+'px');
$('.pointer_tooltip').css('left',position_left+'px');
});
你根本不需要JavaScript;只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。
在堆栈片段中的演示
<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >
你可以用title。它几乎适用于所有事情
<div title="非常适合通过合作结交新朋友。">
<input script=JavaScript type=button title="Click for a compliment" onclick="窗口。alert(“你的头发让我想起了草原上的日落”)”value=“让你快乐”>
<table title="为理解我感受的人工作真是太棒了">
只要想到任何可以在HTML窗口中可见的标签，并在标签中插入title=“whatever tooltip you'd like”，你就得到了一个工具提示。
对于基本的工具提示，您需要:
<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个工具提示选项。
我的版本是
.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
然后是HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>
