Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
This is going to be my first post about tooltip and i thought that i should share some cool and easy tooltips for your projects and blogs and finally i found these tooltips. It's CSS3 ( A bit of jquery for IE6 ) So here we go :
First Add JavaScript ( For IE6 ) :
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
});
</script>
Now Add CSS3 :
<style>
.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-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);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}
/* Yellow */
.yellow-tooltip span
{
border-color: #e1ca82;
background-color: #ffeaa6;
}
.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}
.navy-tooltip span:after
{
border-top-color: #1e2227;
}
.navy-tooltip span:before
{
border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}
.blue-tooltip span:after
{
border-top-color: #61bde7;
}
.blue-tooltip span:before
{
border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}
.pink-tooltip span:after
{
border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
border-top-color: #ce4378;
}
</style>
Finally HTML Markup :
<a href="#" class="tooltip">Text To Display<span><b>Tooltip Title</b><br>Tooltip Text</span></a>
Now read this carefully there are 5colors of this tooltip and you can change colors by changing class tag below are some examples :
<a href="#" class="tooltip">Gray<span><b>Optional title</b><br>This is a gray CSS3 tooltip.</span></a>
<a href="#" class="tooltip yellow-tooltip">Yellow<span><b>Optional title</b><br>This is a yellow CSS3 tooltip.</span></a>
<a href="#" class="tooltip navy-tooltip">Navy<span><b>Optional title</b><br>This is a navy CSS3 tooltip.</span></a>
<a href="#" class="tooltip blue-tooltip">Blue<span><b>Optional title</b><br>This is a blue CSS3 tooltip.</span></a>
<a href="#" class="tooltip pink-tooltip">Pink<span><b>Optional title</b><br>This is a pink CSS3 tooltip.</span></a>
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
