向 div 添加工具提示
我有一个这样的 div 标签：
<div>
<label>Name</label>
<input type="text"/>
</div>
如何在 div 的 :hover 上显示工具提示，最好使用淡入/淡出效果。
对于基本工具提示，您需要：
<div title="This is my tooltip">
喜欢：
.可见{高度：3em；宽度：10em；背景：黄色； }
对于更高级的 javascript 版本，您可以查看：
https://jqueryhouse.com/best-jquery-tooltip-plugins/
上面的链接为您提供了 25 个工具提示选项。
只能用 CSS 完成，根本不需要 javascript
运行演示
[data-tooltip]:before { /* 需要 - 不要触摸 */ content: attr(data-tooltip);位置：绝对；不透明度：0； /* 可定制 */ transition: all 0.15s ease;填充：10px；颜色：#333；边框半径：10px；盒子阴影：2px 2px 1px 银色； } [data-tooltip]:hover:before { /* 需要 - 不要触摸 */ opacity: 1; /* 可自定义 */ 背景：黄色；边距顶部：-50px；左边距：20px； } [data-tooltip]:not([data-tooltip-persistent]):before { 指针事件：无； } /* 仅供测试 */ div { 边框：1px 纯银；背景：#ddd；边距：20px；填充：10px； }
悬停工具提示无关紧要：
如果您将鼠标悬停在我的边界之外，工具提示将消失。
在您将鼠标悬停在我或它上面之前，工具提示不会过期。
应用自定义 HTML 属性，例如。 data-tooltip="bla bla" 到您的对象（div 或其他）：
在演示中，我使用另一个自定义属性 data-tooltip-persistent 和一个简单的规则，定义了另一个规则来指定工具提示在悬停在它上方但在父级之外时是否必须消失：
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}
注 1：浏览器对此的覆盖范围非常广泛，但请考虑对旧 IE 使用 javascript 后备（如果需要）。
注意 2：增强功能可能是添加一些 javascript 来计算鼠标位置并将其添加到伪元素中，方法是更改应用于它的类。
<br> 和 \n 或 \r 之类的其他内容，因为它们在字符串的其余部分中仅显示为纯文本。 更新： 我刚刚注意到设置最大宽度会使其自动调整其内容并放置换行符。真的很整齐！ （但是，如果有人知道答案，我仍然会很感激）
你根本不需要 JavaScript。只需设置 title 属性：
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意，工具提示的视觉呈现取决于浏览器/操作系统，因此它可能会淡入，也可能不会。但是，这是执行工具提示的语义方式，它可以与屏幕阅读器等辅助功能软件一起正常工作。
堆栈片段中的演示
title 属性并没有削减它。
title 就可以了。如果您需要更复杂的东西，还有其他更复杂的答案。老实说，我不确定您要在这里提出什么观点。
这是一个纯 CSS 3 实现（带有可选的 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 }'
}
这是一个不错的 jQuery 工具提示：
要实现这一点，只需按照以下步骤操作：
在您的
标签中添加此代码： 在您想要拥有工具提示的 HTML 元素上，只需为其添加一个 title 属性。标题属性中的任何文本都将在工具提示中。注意：当 JavaScript 被禁用时，它将回退到默认的浏览器/操作系统工具提示。
我做了一些应该能够适应 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;}
有关更深入的讨论，请参阅我的帖子：
A simple Formatted ToolTip text on hover
好的，这里满足了您的所有赏金要求：
没有 jQuery
瞬间出现
在鼠标离开该区域之前不会消失
包含淡入/淡出效果
最后..简单的解决方案
Here's a demo and link to my code (JSFiddle)
以下是我在这个纯粹的 JS、CSS 和 HTML5 小提琴中加入的功能：
您可以设置淡入淡出的速度。
您可以使用简单的变量设置工具提示的文本。
HTML：
<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);
您可以使用数据属性、伪元素和 content: attr() 例如创建自定义 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;
}
我开发了三种渐变效果：
/* 设置工具提示 */ .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block;不透明度：0；指针事件：无；位置：绝对； } .tooltip:after {border-right: 6px 实心透明；边框底部：6px 实心 rgba(0,0,0,.75);左边框：6px 纯透明；内容： '';高度：0；顶部：20px；左：20px；宽度：0； } .tooltip:before { 背景：rgba(0,0,0,.75);边框半径：2px；颜色：#fff;内容：attr（数据标题）；字体大小：14px；填充：6px 10px；顶部：26px；空白：nowrap； } /* 动画 */ /* 淡入淡出 */ .tooltip.fade:after, .tooltip.fade:before { transform: translate3d(0,-10px,0);过渡：所有 .15s 缓进出； } .tooltip.fade:hover:after, .tooltip.fade:hover:before { opacity: 1;变换：translate3d（0,0,0）； } /* 扩展 */ .tooltip.expand:before { transform: scale3d(.2,.2,1);过渡：所有 .2s 缓入出局； } .tooltip.expand:after { transform: translate3d(0,6px,0);过渡：所有 .1s 缓入出； } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1;变换：scale3d（1,1,1）； } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } /* 摆动 */ .tooltip.swing:before, .tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);变换原点：0 0；过渡：transform .15s ease-in-out，opacity 0.2s； } .tooltip.swing:after { transform: translate3d(0,60px,0);过渡：transform .15s ease-in-out，opacity 0.2s； } .tooltip.swing:hover:before, .tooltip.swing:hover:after { opacity: 1;变换： translate3d(0,0,0) rotate3d(1,1,1,0deg); } /* 基本样式：与工具提示无关： */ h1 { padding-left: 50px; } ul { 边距底部：40px; } li { 光标：指针；显示：内联块；填充：0 10px； }
FADE
EXPAND
SWING< /h1>
您可以使用标题。它几乎适用于所有事情
<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"，您就会得到一个工具提示。
您可以像这样在 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")
Stack Snippets 和 jsFiddle 中的示例
函数 Tooltip(el, text) { el.onmouseover = function() { el.innerHTML += '
最简单的方法是在容器内的包含元素上设置 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>
尝试这个。你可以只用 css 来做，我只为工具提示添加了 data-title 属性。
.tooltip{ 位置：相对；显示：内联块； } .tooltip[data-title]:hover:after { content: attr(data-title);填充：4px 8px；颜色：#fff;位置：绝对；左：0；最高：110%；空白：nowrap；边框半径：5px；背景：#000; }
这是一个简单的工具提示实现，它考虑了鼠标的位置以及窗口的高度和宽度：
函数 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 { 颜色：红色；光标：指针； } .couponcode:hover .tooltip { 显示：块； } .tooltip { 位置：绝对；空白：nowrap；显示：无；背景：#ffffcc；边框：1px纯黑色；填充：5px； z 指数：1000；颜色：黑色; } Lorem ipsum dolor sit amet, consectetur adipiscing这是一个工具提示 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 reprehenderitThis is another tooltip in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum这是另一个工具提示。
（另见this Fiddle）
<!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
仅 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 属性。
.tooltip 的情况下使用 [id^=tooltip] 选择器？
div[data-title]) 而无需添加额外的标记。
您可以使用简单的 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;
}
您也可以将其用作工具提示...它的工作原理相同，但您必须编写额外的标签。
<abbr title="THis is tooltip"></abbr>
不使用任何 API 您也可以使用纯 CSS 和 Jquery 来做类似的事情Demo
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');
});
您可以使用纯 CSS 制作工具提示。试试这个。希望它可以帮助您解决问题。
HTML
<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;
}
Tooltips 定位纯 css
div {位置：绝对；最高：50%；左：50%；变换：翻译（-50%，-50%）； -ms-transform: 翻译(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome、Safari、Opera */ text-align: center; } .tooltip { 位置：相对；显示：内联块；边框底部：1px 虚线黑色； } .tooltip .tooltiptext { 可见性：隐藏；宽度：120px；背景颜色：黑色；颜色：#fff; //文本对齐：居中；边框半径：6px；填充：5px 0； /* 定位工具提示 */ position: absolute; z-index：1； } .tooltip：悬停 .tooltiptext { 可见性：可见； } .toolLeft { 顶部：-5px;对：105%； } .toolRight { 顶部：-5px;左：105%； } .toolTop { 底部：100%;左：50%；左边距：-60px； } .toolBottom { 顶部：100%;左：50%；左边距：-60px； }
这个问题有很多答案，但仍然可能会对某人有所帮助。它适用于所有左、右、上、下位置。
这是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>
还有我的版本
.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>
我为它创建了一种公式。首先这是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;
}
<abbr title="...">...</abbr>；浏览器通常用破折号/圆点加下划线，表示“还有更多要说的，请参阅我的工具提示”。