JSFiddle - React, Tailwind, and code Playground
by Rich Costello
January 29, 2014
HTML
<a class="tooltip" href="#">
<img alt="CSS3 Tooltip" style="" src="http://www.soyconnectionnew.com.review.php5.sitelab.net/sites/all/themes/sitelab/images/connect-btn-20-new.gif">
<span>
<b></b>
<strong>Cross Browser Compatibility</strong>
<br>
<img alt="CSS3 tooltip image" style="float:right;height:128px;width:90px;" src="src/css3-tooltip-image.png">
It also works on non-CSS3 compatible browsers such as IE8 and below, degrades to legacy browsers nicely.
</span>
</a>
CSS
a.tooltip {outline:none;text-decoration:none}
a.tooltip strong {line-height:30px;}
a.tooltip > span
{
width:200px;
padding: 10px 20px;
margin-top: 20px;
margin-left: -85px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-family: Arial;
font-size: 12px;
font-style: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px #999;
-moz-box-shadow: 2px 2px 2px #999;
box-shadow: 2px 2px 2px #999;
}
/*a.tooltip > span:hover,*/
a.tooltip:hover > span
{
opacity: 1;
text-decoration:none;
visibility: visible;
overflow: visible;
margin-top:32px;
display: inline;
margin-left: -60px;
}
a.tooltip span b {
width: 15px;
height: 15px;
margin-left: 20px;
margin-top: -19px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset -1px 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
-o-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
display: none\0/;
*display: none;
}
a.tooltip > span {
color: #000000;
background: #FFD503;
background: -moz-linear-gradient(top, #FFD503 0%, #FFD503 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFD503), color-stop(100%,#FFD503));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFD503', endColorstr='#FFD503',GradientType=0 );
border: 1px solid #FFD503;
}
a.tooltip span b {
background: #FFD503;
border-top: 1px solid #FFD503;
border-right: 1px solid #FFD503;
}