An easy way to create CSS tool-tips with a question-mark cursorPublished May 5, 2006 by lobo235
Last updated on Jul 3, 2007
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.
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.
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.
2 comments for this article.
Making AJAX Easier
PHP Application Management