我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。
当前回答
这个问题有很多答案，但它仍然可能会帮助到一些人。它适用于所有左、右、上、下位置。
下面是css:
.m-tb-5 {
margin-top: 2px;
margin-bottom: 2px;
}
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 3px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 3px 6px;
font-size: 10px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}
HTML标签可以是这样的:
<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title=" > text here </p> .
<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title=" > text here </p> .
<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title=" > text here </p> .
<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title=" > text here </p> .
其他回答
你根本不需要JavaScript;只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。
在堆栈片段中的演示
<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >
对于基本的工具提示，您需要:
<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个工具提示选项。
这是一个漂亮的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被禁用时，它将回退到默认的浏览器/操作系统工具提示。
它可以只用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>
