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

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-https://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

Leave a Reply

17 Comments on "Add ToolTip (On Hover Text) To Your Blog/Website"

Notify of
avatar
Sort by:   newest | oldest | most voted
Blogger's Zone
Guest

Amazing !! Thanks for sharing !!

View Comment
angel from heaven
Guest
Anonymous
Guest

thanks – looks great and well explained, see also examples on CodeRun.com

View Comment
Divya Sai
Guest

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

View Comment
Sudhir Kekre
Guest

gr8 post sai. love your blog very much. lots of info.

View Comment
Curtis Chambers
Guest

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?

View Comment
Divya Sai
Guest

Yes Curtis you can do that…
simply change the code in red like this:
from
left:.5em;
background:#fffcd1;
border:1px solid #444;

to
left:.5em;
background: url(http://DIRECT_LINK_TO_IMAGE.jpg) repeat;
border:1px solid #444;

that's it. try to use a small image.

View Comment
Curtis W Chambers
Guest

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!

View Comment
Divya Sai
Guest

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;
}

View Comment
Anonymous
Guest

Great!!
But how to make image preview and URL preview
like this site's demo

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

thanks

View Comment
Sara Hyun
Guest

nice 😉

View Comment
Jaime
Guest

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?

View Comment
Sai - Blogger Help
Guest

Yeah, do whatever editing you want BUT while publishing the post you HAVE to be in the "EDIT HTML" section and delete the extra URL from that code, just before hitting the publish button.

View Comment
Jaime
Guest

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?

View Comment
Sai - BloggerStop.Net
Guest

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)

View Comment
Jaime
Guest

Is there any other way to do a hover? One that won't require deleting every inserted URL every time I edit the page.

View Comment
Noname
Guest

hi… How can i add width & height to the tooltip?

View Comment
wpDiscuz