Css-tooltip

Add ToolTip (On Hover Text) To Your Blog/Website

Tooltip in simple terms is a text-box which is displayed over a hyperlink, when you hover your mouse cursor on the link.
These tooltips are used to briefly give the information about the target page.

See ToolTip in action here: ToolTip For Blogger

To add similar tooltips to your blog, follow these instructions:

Log in to Blogger, go to Layout -> Edit HTML, and find(CTRL+F) this:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<!–TOOLTIP-STARTS–>
<style type=’text/css’>
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;

position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;

}
</style>
<!–TOOLTIP-STOPS-http://bloggerstop.net–>

You may modify the code in red as per your wish and then save the template.

And now onwards, add code similar to this to any link, if you want to display tooltip over it.

<a href=”#”>Link-Title <span>Hidden-Tooltip</span></a>

Credits: CssGlobe
Image credits: Hogki.at

17 thoughts on “Add ToolTip (On Hover Text) To Your Blog/Website

  1. Dude don't comment anonymously, thanks for the suggestion, but you know what.. i would have deleted this comment without chking the link, just coz it's an anonymous comment, and a great website would have remained hidden for another century !

    It doesn't matter whether the site belongs to your or not, if you think the site is really useful for others and it is completely safe for everybody, just share the link with a little info on the link….May be that site gets a review here with a mention to you as the referrer !!

  2. Great tutorial! Best I found on this effect, which is now on my blog thanks!

    One question, is it possible to combine this text hover effect with a color change on the text link? Could you advise how if so?

  3. Divya, thank you. But what I meant was is it possible to combine the effect you outline above – Add ToolTip (On Hover Text), with the effect where when you hover your cursor over a hyperlink, the link changes color before you click on it. For example, a hyper link is blue and underlined, and only when you put your cusor over the link (without clicking on the link)it turns orange. Is it possible to combine these two effects? Thank you, again, Divya!

  4. OOps sorry, I think I haven't read your previous comment correctly….anyways here's what you have to do, add a color variable to "a hover", like this:

    a:hover{
    color: #FF6600; //FF6600 is for orange.
    position:relative;
    z-index:100;
    }

  5. I'm trying to use this for a blogger blog. I put the html from above into the Design page. Then I tried to add hover text in one of my 10 added pages. Initially it works. But if I then go back into edit mode, the "span" portion disappears and it adds a blog URL for no apparent reason. Result is the whole thing is distorted. Any advice?

  6. There's no way around that? I anticipate having dozens or more links that I would have to edit every time I put something in there.

    Why does it insert that URL?

  7. The URL is just the same url, that is there in the address bar – your blogger post-editor URL. When you leave the EDIT HTML section, the Copose mode is a WYSIWYG editor, which automatically inserts the URL from the adressbar to the incomplete a href tags, which actually here is not an incomplete code (actually, the "#" is not considered as a target url by that editor)

Leave a Reply

Your email address will not be published. Required fields are marked *