带有不带JavaScript的HTML内容的工具提示
带有不带JavaScript的HTML内容的工具提示
提问于 2013-06-30 22:09:14
有许多基于JavaScript的库，当您将鼠标悬停在web页面的某个区域上时，它们会显示工具提示。有些相当普通，有些允许工具提示显示带有CSS样式的HTML内容。
但是，有没有一种方法可以在不使用JavaScript的情况下显示带样式的工具提示？如果只使用title属性，则不会处理标记(例如，foo<br />bar不会产生换行符)。我正在寻找一种解决方案，可以让一个显示样式的超文本标记语言内容，而不使用任何JavaScript。
回答 5
Stack Overflow用户
发布于 2015-10-07 23:01:54
类似于koningdavid的，但在显示上工作:无和块，并添加了额外的样式。
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>
Stack Overflow用户
发布于 2018-03-22 00:56:26
纯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>
Stack Overflow用户
发布于 2013-06-30 22:52:43
使用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>
试试吧：http://jsfiddle.net/FdBu7/
这里有一些关于转换的链接和实现转换的新方法：http://www.w3schools.com/css3/css3_transitions.asp http://dev.opera.com/articles/view/css3-show-and-hide/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17391194
复制相关文章
相似问题