Depending on your browser, you get the browser tooltips (with IE) or customized tooltips ('all' the other graphical browsers out there, that actually got a clue). Remember though that browser sniffing is rather buggy and can fail easily.
This is visible for non-IE browsers:
Let's see how one can create a
tooltip
Tooltip:
a small, informative text that pop's up in the browser screen, if a visitor has a mouse pointer hovering over an element
with
markup
Markup:
code that gives structure and meaning to content
and
CSS
CSS, Cascading Style Sheets:
a way to layout and format the content, if well structured
. A tooltip that stays on screen as long as the visitor/user has the mouse pointer resting on whatever tricked it to pop up.
This is visible for IE only:
Let's see how one can create a tooltip with markup and CSS. A tooltip that stays on screen as long as the visitor/user has the mouse pointer resting on whatever tricked it to pop up.
First thing you have to realize is, that customizing tooltips with CSS doesn't work in any current version of Internet Explorer (for Windows; don't know about the Mac). So for IE you have to setup some hack that hides the tooltipped content and replaces it with normal content that has a title. This page has such a hack.
If your browser supports the tooltips à la cart as explained with this page, above you should see the second paragraph of this page to start with This is visible for non-IE browsers:
in the first line. If you hover the phrases tooltip
, markup
or CSS
in that previous paragraph, you'll see the customized tooltips.
If you have this page opened in Internet Explorer though, you will see that first paragraph to have This is visible for IE only:
in the first line. In IE, if you hover the phrases tooltip
, markup
or CSS
, you will get the normal tooltips that are part of the browser chrome with IE.
I have a page in my site, Pop-up in plaats van tooltip, that does this too. The content is in Dutch, but the markup and styles are generic of course. It could be of help in figuring that part out. Another hack could be to use the anchor element, not as a link, but it is the only thing IE understands having a pseudo class :hover.
I know for sure that FireFox and Opera have no problem with customized tooltips. Keep in mind that in a text browser all is visible at once (the content that has a tooltip and the tooltip itself and the replacement content for IE too). This can be a bit much and you can't setup a special style sheet for a text browser, now can you.
This also means that visitors that don't actually see the content (but get it through an aural browser for example), and search enige bots, get all the content at the same time too, as does someone with a browser that doesn't support CSS. For the aural browser you could setup a specific style sheet. The search eninge might think that you're spamming your keywords, so be careful about how you implement the double content.
You can use this to make sure that some extra information is visible as long as the visitor/user wants it to be visible. Also, you can style the information in the tooltip and the tooltip as a whole to match with your sites looks.
Another advantage is that you can setup a separate style sheet for printing for example, in which you specify the tooltips to be inline and visible and get them printed with the main content. Try that with the value of the title attribute...
Look at the source of this page to see all the details. The main thing is that you create some content that is not visible unless the visitor/user hovers specific part of it. If that hover happens, it switches the value for the visibility property to visible and out pops the extra content. Neat, heh?
This example page was setup in response to a usenet newsgroup question in ciwas: Making tooltips stay longer....
This page is part of the PretLetters website. If you understand Dutch and you liked this advise, pay us a visit some time.
Maybe the index of the test area, of which this page is part, is worth checking out too, since in that part of my site I play around a bit. There might be something worth your while related to the main topic of this current page.
If you liked what you saw and I helped you out a bit with something, you could consider contributing something small so I can continu to put efford in this site. With that you help me to help you and others. Please visit my page (in Dutch) on bijdragen, contributions and donations. Thank you,