Tooltip arrow right
- by Tabatha M
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;
}
?
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?
Thanks
