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.
