Create Tool tips using CSS easily

As you have surfed the web you have probably run into pages that had a nifty tool-tip that would come up when you hovered over a word. These tool-tips are being used more and more by web designers to display the definition of a word or the long version of an acronym. There are other uses as well but you will figure those out on your own, I just want to show you how to add these CSS tool-tips to your pages. He is a snippet of code that will show a CSS tool-tip. After checking out the code, try hovering over the example text below the code.

<span title="This is a CSS tool-tip" style="cursor: help;">Hover Here</span>

Hover Here

You should see that the cursor changes to a question mark when you hover over the text. You can style the text however you wish but it helps to make the style stand out a bit so that the user knows that the text has something different about it. Most web designers use the following style for text that has a CSS tool-tip.

<span title="This is another CSS tool-tip" style="cursor: help; border-bottom: 1px dashed #000000;">Another Example</span>

Another Example

With the dashed border underneath the text your users will know that there is something about the text that is different from the rest of the text so they will most likely hover their mouse over it and see the CSS tool-tip come up. If your regular links are underlined with a solid line then users will know that text underlined with a dashed line is different from a link.

You can make the text for your tool-tips pretty long and most browsers will still show them. Firefox is the only browser (as far as I can tell) that truncates the tool-tip to a shortened length. The other browsers I have tested will display a much longer tool-tip although I am sure they have a maximum limit too. I have tested these tool-tips in IE, Firefox, Opera, and Konquerer. Please let me know how they work in other browsers specifically if there is a problem.

You may also wish to learn how to use Javascript to create tool-tips on your pages.

Get more information

Tags: css, css tool tips, create tooltips, span, tooltip example

Can't find what you're looking for? Try Google Search!

	Web eshwar123.blogspot.com