Stylish CSS Tooltip For Hyperlink

Tweets by @mrqasimashraf

Tooltip is a message or hint that appears when a user hover mouse cursor on an icon, image, hyperlink or any other similar element. It is use to give description of an element for better user experience. This Tooltip is styled with CSS and works in conjunction with HTML code. It can be used on both blogger or wordpress self hosted blog. For a demo of how this tutorial works, hover your mouse cursor on the following link.

Adding CSS Code

If you are on wordpress, you will need to insert the following code into your template style sheet. For blogger hosted blog, follow the steps below.

• Go to your blogger dashboard
• Click on Template > Edit HTML > Proceed
• Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

/* Stylish CSS Tooltip By MrQasimAshraf.Blogspot.Com */
a:link,
a:visited {
position:relative;
}
.rbtooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#C0C0C0;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(192,192,192,0.8)),to(rgba(192,192,192,1)));
border-color:#999999;
}
.rbtooltip:before,
.rbtooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.rbtooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .rbtooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.rbtooltip,
.rbtooltip.left {
left:0;
right:0;
}
.rbtooltip:before,
.rbtooltip:after,
.rbtooltip.left:before,
.rbtooltip.left:after {
left:40px;
right:auto;
}
.rbtooltip:before {
border-top-color:#999999;
}
.rbtooltip:after {
border-top-color:#C0C0C0;
}
/* Stylish CSS Tooltip By MrQasimAshraf.Blogspot.Com */

• Save your template

Adding HTML code

Whenever you are drafting a new blog post and want to add the Tooltip to hyperlink , simply shift to HTML mode and paste the following code.

<a href="LINK-URL">KEYWORD<span class="rbtooltip">Tooltip Text</span></a>

• Replace LINK-URL with your preferred url
• KEYWORD represent the anchor text of the link
• Tooltip Text is the description text that with appear when you hover your mouse cursor on the hyperlink.
• Done!

Enjoyed This Post? Subscribe For More Update!

Follow @mrqasimashraf