链接： http:
//jsbin.com/EFAlace/3/edit ?html,css,output
HTML：
<a href='#' class='tooltip-parent'>Hover over me!
<span class='tooltip-container'>
<span class='tooltip'>
<a style='href='#'>Weird link</a><br>
One<br>
Two<br>
Three<br>
Four<br>
</span>
</span>
</a>
.tooltip-container添加用于绝对定位，用于“重置”工具提示位置。
CSS（少）：
.tooltip-container {
position: absolute;
}
a:hover {
background-color: grey;
}
.tooltip-parent {
display: inline-block;
.tooltip {
width: 150px;
display: none;
position:relative;
border:1px solid blue;
&:before, &:after {
content: '';
top: -20px;
left: 20%;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
margin-left: -20px;
}
&:before {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 23px solid;
margin-left: -23px;
border-bottom-color: inherit; /* Can't be included in the shorthand to work */
top: -23px;
}
}
&:hover .tooltip {
padding: 10px;
display: inline-block;
top: 20px;
}
}
ul {
list-style:none;
margin: 0; padding:0;
li {margin: 0; padding:0;}
}
:before东西:after:是工具提示顶部的三角形。谷歌关于“CSS 三角形伪元素”
我一直在尝试使用纯 CSS 工具提示，它会在将鼠标悬停在父元素上时弹出。你可以在 jsBin 看到工作示例。但是我遇到了一个奇怪的问题 - 当我在工具提示中添加锚点时 - html 标记爆炸了，只需<!--<a style='href='#'>Weird link</a><br>-->在 HTML 窗格中取消注释此代码，您就会看到我在说什么。然后查看标记结构 - 浏览器只是将 HTML 内容放置.tooltip在该工具提示所附加到的元素之外。
那是非常不清楚的行为，任何想法将不胜感激。