工具提示箭头右 [英] Tooltip arrow right

问题描述

我想让此工具提示箭头指向链接的右侧。

I'm trying to make this tooltip arrow point to the right towards the link.

CSS

.tooltipside
{
position: relative;
cursor: help;
display: inline-block;
outline: none;
}

.tooltipside span
{
visibility: hidden;
position: absolute; 
bottom: -22px;

z-index: 999;
width: 52px;
margin-left: -63px;
padding: 2px;
border: 1px solid #80a7ba;
background-color: white;                     
-moz-border-radius: 4px;
border-radius: 4px;  
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tooltipside:hover
{
border: 0; /* IE6 fix */
}

.tooltipside:hover span
{
visibility: visible;
}

.tooltipside span:before,
.tooltipside span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;  
border-top: 8px solid #80a7ba;
border-left: 8px solid transparent;
border-right: 8px solid transparent;        
border-bottom: 0;  
}

.tooltipside span:before
{
border-top-color: #ccc;
bottom: -8px;
}

html是

​ The html is

 <a href='#' class='tooltipside'><span>
 <img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png' 
  border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>​

它目前位于工具提示中心，我需要它向右指向链接。

It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this?

感谢

推荐答案

你以后？ http://jsfiddle.net/kX5kH/

我使用定位移动箭头，然后在透明broders周围交换，使箭头指向正确的方式。

I used the positioning to move the arrow, then swapped around the transparent broders to make the arrow point the right way.

注意：我添加了一个父< div> 并且绝对定位，因为它是拥抱边缘，而且看不到工具提示。

NOTE: I added a parent <div> and positioned it absolutely, because it was otherwise hugging the edge and you couldn't see the tool tip.

也没有开始的< b> 标签。

最后一个注意事项， IE6修复，这是有趣的，因为这不会在IE6中工作。框阴影，前/后选择器和透明边框将无法正确显示。但老实说，我不会担心IE6 = P

One last note, I noticed you had a IE6 fix, which is intriguing because none of this will work in IE6. Box shadows, before/after selectors, and transparent borders will not appear correctly. But honestly I wouldn't be concerned about IE6 =P

希望这有帮助。

这篇关于工具提示箭头右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！