带有 HTML 内容的工具提示，无需 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17391194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tooltip with HTML content without JavaScript
提问by gaetanm
There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.
当您将鼠标悬停在网页的特定区域时，有许多基于 JavaScript 的库会显示工具提示。有些相当简单，有些允许工具提示显示使用 CSS 样式的 HTML 内容。
But is there a way to show a styled tooltip without using JavaScript? If you just use the titleattribute, tags are not processed (e.g. foo<br />bardoesn't produce a line break). I'm looking for a solution that allows one to display styled HTML content without using any JavaScript.
但是有没有办法在不使用 JavaScript 的情况下显示样式化的工具提示？如果您只使用该title属性，则不会处理标记（例如foo<br />bar，不会产生换行符）。我正在寻找一种解决方案，允许在不使用任何 JavaScript 的情况下显示样式化的 HTML 内容。
回答by koningdavid
I have made a little example using css
我做了一个小例子使用 css
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
/* hide and position tooltip */
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}<div class="hover">hover
<div class="tooltip">asdadasd
</div>
</div>FIDDLE
小提琴
回答by heytools
Using the titleattribute:
使用标题属性：
<a href="#" title="Tooltip here">Link</a>回答by Pawel
Similar to koningdavid's, but works on display:none and block, and adds additional styling.
与 koningdavid 类似，但适用于 display:none 和 block，并添加了额外的样式。
div.tooltip {
position: relative;
/* DO NOT include below two lines, as they were added so that the text that
is hovered over is offset from top of page*/
top: 10em;
left: 10em;
/* if want hover over icon instead of text based, uncomment below */
/* background-image: url("../images/info_tooltip.svg");
/!* width and height of svg *!/
width: 16px;
height: 16px;*/
}
/* hide tooltip */
div.tooltip span {
display: none;
}
/* show and style tooltip */
div.tooltip:hover span {
/* show tooltip */
display: block;
/* position relative to container div.tooltip */
position: absolute;
bottom: 1em;
/* prettify */
padding: 0.5em;
color: #000000;
background: #ebf4fb;
border: 0.1em solid #b7ddf2;
/* round the corners */
border-radius: 0.5em;
/* prevent too wide tooltip */
max-width: 10em;
}<div class="tooltip">
hover_over_me
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>回答by Charan Ghate
This one is very interesting,
这个很有意思，
HTML and CSS only
仅 HTML 和 CSS
.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}<span class="help-tip">
<span > This is the inline help tip! </span>
</span>回答by Marina
Pure CSS:
纯 CSS：
.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>回答by NVRM
Another similar way to do it by css:
另一种通过 css 实现的类似方法：
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}
#hoverme:hover {
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>Try it: http://jsfiddle.net/FdBu7/
试试看：http: //jsfiddle.net/FdBu7/
And here is some links about transitions and new ways to do it: http://www.w3schools.com/css3/css3_transitions.asphttp://dev.opera.com/articles/view/css3-show-and-hide/
这里有一些关于过渡和新方法的链接：http: //www.w3schools.com/css3/css3_transitions.asp http://dev.opera.com/articles/view/css3-show-and-hide /
回答by contradictioned
You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:
你可以使用 title 属性，例如，如果你想在文本上有一个工具提示，只需：
<span title="This is a Tooltip">This is a text</span>回答by Bryan Algutria
This is my solution for this:
这是我的解决方案：
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
The element recibes a "tooltip-title" attribute with the tooltip text and it is displayed with CSS on hover, I prefer this solution because I don't have to include the tooltip text as a HTML element!
该元素将“工具提示标题”属性与工具提示文本一起使用，并在悬停时使用 CSS 显示，我更喜欢此解决方案，因为我不必将工具提示文本作为 HTML 元素包含在内！
#HTML
<button class="tooltip" tooltip-title="Save">Hover over me</button>
#CSS
body{
padding: 50px;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(tooltip-title);
min-width: 54px;
background-color: #999999;
color: #fff;
font-size: 12px;
border-radius: 4px;
padding: 9px 0;
position: absolute;
top: -42px;
left: 50%;
margin-left: -27px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:after {
content: "";
position: absolute;
top: -9px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #999999 transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
opacity: 1;
}
