带三角形的工具提示
我已经为这个问题创建了一个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吗？就像这样，但在左边
回答 3
Stack Overflow用户
发布于 2012-09-26 21:16:42
您可以使用CSS，通过使用css triangle trick
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;
}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>
Stack Overflow用户
发布于 2012-09-26 21:14:32
我开发CSStooltip.com的目的是让工具提示只在CSS中使用三角形。
示例：
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}Stack Overflow用户
发布于 2012-09-26 21:22:30
试试这个：http://ecoconsulting.co.uk/examples/css-tooltip/
它解释了问题并修复了问题，并允许使用带边框的箭头和工具提示。
链接的内容
使用:after和:before的纯CSS工具提示
这些工具提示滚动使用自定义数据标记数据-属性( HTML5 - tooltip )来填充显示属性中包含的文本的工具提示。箭头三角形由两个生成的重叠元素组成，只有上边框可见(r-l表示透明，下边框为0px)。所有工具提示文本都是链接的扩展，因此可以单击。
查看源代码获取代码--尽可能的干净，并且每个工具提示都有一个单独的css样式块--使用箭头工具提示(最终) CSS来完成样式。不喜欢这个颜色吗？你知道该怎么做。最初的灵感来源：Nicolas Gallagher's Pure CSS speech bubbles，并希望在纯CSS中模仿Addy Osmani的JQuery工具提示。
使用:before的
- 仅CSS工具提示(无箭头)
此带有CSS样式的鼠标悬停工具提示的链接使用工具提示内容的data-属性。也可以使用:after生成工具提示。方框阴影使其看起来漂浮在内容上方。
带有:before和:after的
- 仅CSS工具提示箭头(范围内的
a标记)
由于该链接的: the属性已经用于工具提示文本，因此我们需要一个额外的元素来提供进一步生成的内容。此CSS样式的鼠标悬停工具提示链接添加了一个箭头，该箭头由包装该链接的跨度上的overlapping :before和:after属性构成。三角形没有宽度或高度，仅由边框构成，这意味着我们不能使用具有正值的框阴影，因为它显示在l-r边框的透明矩形之外，而不是“箭头”周围。
错误:当悬停在箭头的“边框”上时，三角形会持续存在。错误: Mozilla (Firefox)：箭头边框在链接下面，需要更高的z索引。
- 带有
:before和:after的最终纯CSS工具提示箭头(spaninsidea标签)此半透明CSS样式的鼠标悬停工具提示在a标签内使用跨度。阴影已恢复，但顶部/左侧的值为负值，以避开箭头。对于最终的触摸，alpha透明度应用于工具提示元素，并进行反复调整，以将箭头的颜色混合到较低的渐变中，并降低内部下面的外三角形(较暗的)边框颜色的可见性。
通过应用tooltip类并将链接文本包装在范围中，可以将其添加到任何链接中。默认情况下，工具提示继承跨度的font-weight值。
遗憾的是，生成的元素上的CSS3 (在本例中是淡入)转换还没有得到足够广泛的支持(仅支持FF，但即使在那里，我也不能让它工作)。
https://stackoverflow.com/questions/12610409
复制相似问题
腾讯云开发者
