User:Taka/Tooltips

tooltip in ation

Intro

Tooltips can show additional information. On the Dutch wikipedia, i did an experiment with stylesheet based tooltips. It does not work in Internet Explorer, but it does work (with some glitches) in Mozilla/Firefox. This page is to explain and demonstrate it on the English wikipedia.

The idea is based on this website: http://psacake.com/web/jl.asp

Stylesheet

To make it work, it is required to make an adaption to your personal stylesheet (that can be done at User:YourName/standard.css or User:YourName/monobook.css or whatever style you have selected in your preferences.

---

/* start tooltip code  */

div.info {
  z-index:24;                      /*required */
  position:relative;               /*required */
  background-color:yellow;         /*use any color you like */
  cursor:help                      /*optional, or use another cursor */
}

div.info:hover {
  z-index:25;                      /*required */
  background-color:pink            /*use any color you like */
}

div.info:hover div.urlexpansion {
  display:block;                   /*required */
  position:absolute;               /*required */
       /*border and size specifications, change as you like */
  top:2em;
  left:2em;
  width:15em;
       /* colors, change as you like */
  border:1px solid #0cf;
  background-color:#cff;
  color:#000;
}

/* end tooltip code  */

---

Quick test if it works

After adapting your

stylesheet

Cascading Style Sheets (CSS) is a computer language used to describe the stylistic presentation of a structured document written in HTML or XML.

, this text should have some words marked yellow (or another color if you adapted the code above). When you hover your move over the marked word, an

box

This is the box you should see when hovering over the word box.

should appear showing additional text.

I might create a demo from the text of a real article to demonstrate how it would look like there.

Technical problems

• It does not work in Internet Explorer, and it won't work in Internet Explorer. It uses the hover pseudoclass on a div element, which is not supported in Internet Explorer. IE supports hover only on an a element.
  • http://dean.edwards.name/IE7/ can be a hackish solution to that.
• The title of internal links shows over the tooltip as created by this method, and makes it partly unreadable. That can't be solved using CSS, but it might be solved using javascript.
• The printable version of the page shows the text of the tooltips as normal text, inline with the rest. This method uses a CSS class (urlexpansion) meant for printing, which really shouldn't be done. But there wasn't any other way for this demonstration.
• The tooltip runs out of the visible page when the marked word is located at the righthand of the page.

Also it hasn't been tested with more complicated pages, with tables, images etc.

How is it done

1. Put the whole text of an article in a div.
2. Use this code:

<div class="info" style="display:inline;">visible text<div class="urlexpansion">text of the tooltip</div></div>

template

Somebody made a template, this is to show (if) how it works.

move mouse over

expect a longer comment on this line

template:tooltip

visible text

text of the tooltip