将工具提示添加到div

小开

你根本不需要JavaScript；只需设置title属性：

<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>

请注意，工具提示的可视化呈现依赖于浏览器/操作系统，因此它可能会淡入，也可能不会。然而，这是执行工具提示的语义方式，它将与屏幕阅读器等辅助功能软件一起正常工作。

堆栈片段中的演示

<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>

小开

最佳答案

对于基本工具提示，您需要：

<div title="This is my tooltip">

比如：

.visible {
height: 3em;
width: 10em;
background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

For a fancier javascript version, you can look into:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

The above link gives you 25 options for tooltips.

小开

这是一个不错的jQuery工具提示：

https://jqueryui.com/tooltip/

要实现这一点，只需遵循以下步骤：

在您的<head></head>标签中添加此代码：

<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.

Note: When JavaScript is disabled, it will fallback to the default browser/operating system tooltip.

小开

我做了一些应该能够适应div的东西。

超文本标记语言

<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;}

有关更深入的讨论，请参阅我的帖子：

悬停上的一个简单的格式化工具提示文本

小开

<!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

小开

您可以使用data属性、伪元素和content: attr() eg创建自定义CSS工具提示。

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
<label>Name</label>
<input type="text" />
</div>

。

div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}


div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid orange;
border-bottom: 5px solid transparent;
}


input[type="text"] {
width: 125px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

小开

您可以在onmouseover和onmouseout期间切换子div，如下所示：

function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += '<div class="tooltip">' + text + '</div>'
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}


//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

堆栈片段和jsFiddle中的示例

function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += '<div class="tooltip">' + text + '</div>'
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}


//Sample Usage
Tooltip(document.getElementById("mydiv"), "I'm a tooltip")

#mydiv {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 50px;
padding: 5px 10px;
background-color: #e2f7ff;
box-shadow: 1px 1px 1px 0px #cecece;
}


.tooltip {
position: absolute;
display: inline-block;
white-space: nowrap;
width: auto;
height: auto;
background-color: #11121b;
color: white;
padding: 4px 6px;
border-radius: 3px;
z-index: 99;
left: 100%;
top: 0;
}

<div id="mydiv"> This is just a div </div>

小开

最简单的方法是在容器内的包含元素上设置position: relative，在工具提示元素上设置position: absolute，使其相对于父元素（包含元素）浮动。例如：

<div style="background: yellow;">
<div style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />


<div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
Tooltip text
</div>
</div>
</div>

小开

仅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属性。

小开

这是一个纯CSS 3实现（带有可选的JS）

您唯一要做的就是在任何div上设置一个名为“data-工具提示”的属性，当您将鼠标悬停在它旁边时，该文本将显示在它旁边。

我包含了一些可选的JavaScript，它将导致工具提示显示在光标附近。如果您不需要此功能，您可以放心地忽略此小提琴的JavaScript部分。

如果您不想在悬停状态下淡入，只需删除转换属性。

它的样式类似于title属性工具提示。这是JSFiddle：http://jsfiddle.net/toe0hcyn/1/

超文本标记语言示例：

<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  }'


}

小开

好的，这是你所有的赏金要求：

没有jQuery
瞬间出现
在老鼠离开该区域之前不要消失
加入淡入/淡出效果
最后，简单的解决方案

这是一个演示和我的代码链接（JSFiddle）

以下是我在这个纯粹的JS、CSS和HTML5小提琴中加入的功能：

您可以设置淡入淡出的速度。
您可以使用一个简单的变量设置工具提示的文本。

超文本标记语言：

<div id="wrapper">
<div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS：

#a{
background-color:yellow;
padding:10px;
border:2px solid red;
}


.tooltip{
background:black;
color:white;
padding:5px;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
border-radius:10px;
opacity:0;
}

JavaScript：

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
// seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";


var showTip = function(){
var tip = document.createElement("span");
tip.className = "tooltip";
tip.id = "tip";
tip.innerHTML = tipMessage;
div.appendChild(tip);
tip.style.opacity="0"; // to start with...
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)+0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "1"){
clearInterval(intId);
}
}, fadeSpeed);
};
var hideTip = function(){
var tip = document.getElementById("tip");
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)-0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "0"){
clearInterval(intId);
tip.remove();
}
}, fadeSpeed);
tip.remove();
};


a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);

小开

可以做到仅使用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>

应用自定义超文本标记语言属性，例如。data-tooltip="bla bla"到您的对象（div或其他）：
```
 <div data-tooltip="bla bla">
something here
</div>
```
将每个[data-tooltip]对象的:before伪元素定义为透明、绝对定位并以data-tooltip=""值为内容：
```
 [data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}
```
定义每个[data-tooltip]的:hover:before悬停状态以使其可见：
```
 [data-tooltip]:hover:before {
opacity : 1;
}
```
将您的样式（颜色、大小、位置等）应用于工具提示对象；故事结束。

在演示中，我定义了另一个规则来指定当工具提示悬停在它上面但在父级之外时是否必须消失，使用另一个自定义属性data-tooltip-persistent和一个简单的规则：

[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}

注1：浏览器对此的覆盖范围非常广泛，但考虑为旧IE使用javascript回退（如果需要）。

注2：增强可能是添加一些javascript来计算鼠标位置并通过更改应用于它的类将其添加到伪元素中。

小开

不使用任何API 你也可以通过使用纯CSS和JQueryDemo来做类似的事情。

超文本标记语言

<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');
});

小开

你可以用头衔这对任何事情都有效

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

只要想想任何可以在html窗口中可见的标签，并在它的标签中插入一个title="whatever tooltip you'd like"，你就会得到一个工具提示。

小开

你可以使用纯CSS制作工具提示。试试这个。希望它能帮助你解决你的问题。

超文本标记语言

<div class="tooltip"> Name
<span class="tooltiptext">Add your tooltip text here.</span>
</div>

css

.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}


.tooltip .tooltiptext {
visibility: hidden;
width: 270px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}


.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}


.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

小开

这个问题有很多答案，但它仍然可能对某人有所帮助。它适用于所有左、右、上、下的位置。

下面是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;
}

超文本标记语言可以是这样的：

<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>

小开

工具提示定位纯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>

小开

而我的版本

.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;
}

然后超文本标记语言

<div title="This is some information for our tooltip." class="tooltip">bar </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;
}

小开

试试这个。您可以仅使用css完成此操作，而我仅为工具提示添加了data-title属性。

.tooltip{
position:relative;
display: inline-block;
}
.tooltip[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #fff;
position: absolute;
left: 0;
top: 110%;
white-space: nowrap;
border-radius: 5px;
background:#000;
}

<div data-title="My tooltip" class="tooltip">
<label>Name</label>
<input type="text"/>
</div>

小开

您可以尝试引导工具提示。

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

进一步阅读这里

小开

您也可以将其用作工具提示……它的工作原理相同，但您必须编写额外的标签。

<abbr title="THis is tooltip"></abbr>

小开

我开发了三种类型的褪色效果：

/* 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>

小开

这是一个简单的工具提示实现，它考虑了鼠标的位置以及窗口的高度和宽度：

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>.

（另见这个小提琴）

小开

我为它创建了一个公式。首先是html

<div class="tooltip-container">
<button class="tooltip-tarjet">
My Button
</button>
<div class="tooltip-element">
This is my tooltip content right here...
</div>
</div>

现在css为它

.tooltip-container {
/* it contains the tooltip message and the one firing the tooltip
* it has position relative since it allows for a better responsive positioning
* of the tooltip-element */
display: inline-block;
position: relative;
flex-direction: row;
}
.tooltip-tarjet:hover + .tooltip-element {
/* this selector rule matches the tooltip-element right after
* tooltip-tarjet at a hover action
*  */
display: inline-block;
position: absolute;
background-color: #869096;
color: white;
opacity: 1;
transition: all 1s;
}
.tooltip-element {
/* here goes the tooltip-element styles and positioning, now your
* tooltip element will always remain to your desired positionno matter
* the screen size at hand
*  */
display: none;
opacity: 0;
text-align: center;
padding: 7px;
z-index: 10;
width: 200px;
left: -60px;
bottom: 48px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-size: 12px;
line-height: 1.5;
}