CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code.

The HTML:

1 This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here.

The CSS:

1 a.tooltip {position: relative}
2 a.tooltip span {display:none; padding:5px; width:200px;}
3 a:hover {background:#fff;} /*background-color is a must for IE6*/
4 a.tooltip:hover span{display:inlineposition:absolute;}

You can add more styles to the above to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

Advertisements

11 thoughts on “CSS Tooltips

  1. Congratulations for posting such a useful blog. Your blog isn’t only informative but also extremely artistic too. There usually are extremely couple of individuals who can write not so easy articles that creatively. Keep up the good writing !!

  2. I’m impressed, I have to say. Really not often do I encounter a weblog that’s each educative and entertaining, and let me inform you, you’ve got hit the nail on the head. Your concept is outstanding; the problem is something that not enough people are talking intelligently about. I am very pleased that I stumbled throughout this in my search for something regarding this.

  3. Good ¡V I should definitely pronounce, impressed with your website. I had no trouble navigating through all tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, website theme . a tones way for your client to communicate. Excellent task..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s