带有三角形的工具提示 [英] Tooltip with a triangle
本文介绍了带有三角形的工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我为此问题创建了 jsFiddle .
a.tip {
position: relative;
}
a.tip span {
display: none;
position: absolute;
top: -5px;
left: 60px;
width: 125px;
padding: 5px;
z-index: 100;
background: #000;
color: #fff;
-moz-border-radius: 5px; /* this works only in camino/firefox */
-webkit-border-radius: 5px; /* this is just for Safari */
}
a:hover.tip {
font-size: 99%; /* this is just for IE */
}
a:hover.tip span {
display: block;
}
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>
基本上,我的网站上有一个工具提示,它显示在链接的右侧.但是在黑匣子的左侧,我想要一个三角形附加到指向链接的箱子上,是否可以仅使用CSS来做到这一点?就像这样,但是在左边
Basically I have a tooltip on my site, and it appears to the right of my link. But on the left hand side of the black box I would like a triangle attached to the box pointing to the link, is it possible to do this using only CSS? just like this but to the left
推荐答案
您可以使用 演示: http://jsfiddle.net/dAutM/7/
实时代码段
a.tip {
position: relative;
}
a.tip span {
display: none;
position: absolute;
top: -5px;
left: 60px;
width: 125px;
padding: 5px;
z-index: 100;
background: #000;
color: #fff;
-moz-border-radius: 5px;
/* this works only in camino/firefox */
-webkit-border-radius: 5px;
/* this is just for Safari */
}
a.tip span:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
left: -8px;
top: 7px;
}
a:hover.tip {
font-size: 99%;
/* this is just for IE */
}
a:hover.tip span {
display: block;
}
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>
这篇关于带有三角形的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文