Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Stylish CSS Tooltip For Hyperlink

by Durodola Ridwan | Wednesday, March 06, 2013 | | 4 Comments

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.


DEMO:  Blogger TipsWe Offer The Best Blogger Tips

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 RealcomBiz.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 RealcomBiz.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!

Hope you find this post useful? Feel free to share it using the share button. Any queries or suggestions is welcome.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

4 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. If you need a good resume to apply to a new job position, you should review cv writing service before referring there. Besides, many useful information are posted here about other writing companies and may be you will find something more suitable for you.

    ReplyDelete
  2. Thank you very much for your great template! i love all your works, they're amazing. But, i like this one alot.I put your template in my blog, see
    gta 5 | www.google search | excel

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger