提供HTML内容而无JavaScript的工具提示
当您将鼠标hover在网页的某个区域上时，会有很多基于JavaScript的库显示工具提示。 有些是相当简单的，有些允许工具提示显示CSS样式的HTML内容。
但有没有一种方法来显示样式的工具提示，而不使用JavaScript？ 如果您只使用title属性，则不会处理标签（例如， foo<br />bar不会产生换行符）。 我正在寻找一种解决scheme，允许用户不使用任何JavaScript来显示样式化的HTML内容。
我用css做了一个小例子
HTML：
<div class="hover">hover <div class="tooltip">asdadasd </div> </div>
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; }
小提琴
使用title属性：
<a href="#" title="Tooltip here">Link</a>
与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("..http://img.dovov.cominfo_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>
另一个类似的方式来做到这一点的CSS：
<style> #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%;} </style> <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 /
你可以使用title属性，例如，如果你想在文本上有一个工具提示，只需要：
<span title="This is a Tooltip">This is a text</span>
这个很有意思，
只有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>
