MediaWiki:Tooltips.js/Documentation/Examples

The tests below are active only if this page is accessed through this URL. If you don't see any tooltips, just click the link above and re-try.

Tests

When the mouse cursor moves over this
box, a tooltip with some text should pop up.

When the mouse pointer is moved around within this box,
the tooltip should follow it.

When the pointer leaves this box, the tooltip should disappear after a little while.


This is the same, but the tooltip is a little bit more complex, and it should disappear quicker.

Also, this tooltip should be to the top right of the mouse pointer, and it should let the stuff below it shine through.


This tooltip contains links and even an image. It does not follow the mouse pointer: if it did, you could never get into the tooltip and click any links there. Instead, this tooltip always appears 200 pixels left of the right edge of this box and 20 pixels below the top. The tooltip is shown upwards from that position.

It also uses a different styling.


This tooltip is defined in exactly the same way as the second one. (Except that it is opaque: it doesn't let the text below it shine through.) However, because there is a section edit link within the tooltip, it won't follow the mouse around...

Another problem with wikitext headers is that you cannot exclude them from the table of contents. Notice how we have here a table of contents that shows three subsections, "This is a statue of Babe Ruth", "Beware of headings", and "Another heading"? But these headings are not on this page? Yes they are: they're in the two tooltips, of which we've hidden the text.


You can avoid the section edit link by using HTML header markup using <h2> or <h3>. A way to exclude a header from the table of contents is not known, however.


Oops! No tooltip appeared? Well, click here!

(Note: this isn't good interface design. It's just here to show that this can be done, too.)


To get the tooltip here, you'll have to click on the button to the right... (well, only Safari and Firefox get the CSS formatting used for this button right. With some crazy hacks even IE6 and Opera 9.26 can be made to display that button more or less where it should be, but it's still not quite right: the button should be outside of the green box, not overlapping its border. And certainly not inside the box, which is what IE6 does.)

The tooltip will appear below this box, slightly overlapping it, and will stay up until either the button or the tooltip itself is clicked, or until you move the mouse pointer to some other place where another tooltip pops up.

If this box were an input control of a form, it could also be setup appear when the control gets the focus, and to disappear when the control lost the focus.

Or it could be set up such that it remained visible as long as the mouse pointer was over the button, the box, or the tooltip itself. Or some combination of these...

Note that if this were a form, we could use other, simpler means of getting the button to the right of the control such that it'd work on all browsers.


On this box, you should get a dynamically created tooltip that shows the mouse coordinates at the moment the tooltip was created.

Every second time it pops up, this tooltip will contain a link and thus should not follow the mouse around.


Here, you should get a tooltip near the mouse position when the mouse enters this box. this tooltip should have a close button, and should stay up until that button is clicked or until some other tooltip pops up.

This works now in Firefox, Opera (both 9.26 and 9.50b), and in Safari, and even in IE6, despite the amazing array of layout bugs relating to right floats that IE displayed. I hope the button is also positioned more or less correctly on IE7...


Here, you should again get a tooltip with a close button (like above), but the tooltip is much smaller.


On this box, the tooltip should not appear automatically. But when you click this link, a tooltip should appear.


Here, we should get a tooltip when we enter the box. This tooltip will contain a link that changes its contents when clicked. Let's see what happens.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui.

Here are the tooltips:

This is the tooltip.

Tooltips may contain Wikitext

This tooltip uses wikitext for its styling.

Isn't that nice?

Column 1 Column 2
Dummy Foo
Bar

This is a statue of Babe Ruth

 
The statue was designed by Susan Luery and stands in front of the Oriole Park at Camden Yards in Baltimore, Maryland USA
  Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License.

Beware of headings

This tooltip also uses wikitext. But note that the title also is a normal heading. If the server generates a section edit link, this tooltip will remain fixed and not follow the mouse around, even though it doesn't contain any other links.

Maybe the tooltip engine should be adapted to remove all section edit links within a tooltip?

This tooltip is configured to appear only when the green box is clicked, and to disappear only when either the green box or the tooltip itself is clicked. It'll also disappear if some other tooltip is shown.

If this green box above were an input control of a form, you could for instance display some help text here. Of course all this needs Javascript to work, so you should be careful when and where to employ such a technique. The tooltips on this page are created by the little script at MediaWiki:Tooltip Tests.js, which uses the tooltip library at MediaWiki:Tooltips.js.

Font sizes

Also note that this tooltip has the default font size (whereas all the others have a font size that is smaller than the normal article font size). Because of the way the Wikimedia CSS style sheets handle fonts, a tooltip by default always has the smaller font size. In this tooltip, we've restored the normal font size by styling it through CSS with "font-size:127%".

Another heading

The heading above has no "section edit" link. Its wikitext is

<h2>Another heading</h2>

Tooltip with close button

Click the close button in the upper right corner of this tooltip to make it disappear. Note that the button and the title text displayed when the mouse pointer hovers over it are not hardcoded in some Javascript. It's all configured here in the Wikitext of this very page.

     

Tiny tip.
This tip is bound to a link.

This tip has content that can be toggled on and off. Click ESC to make the tooltip go away.

Click the link!

End of tooltips.