WZ

wz is a MediaWiki extension I wrote to enable tooltips (or mouse rollover).

I rely for that on the best tooltips available on the web, those of Walter Zorn (see a photo).

Usage

Use the wz tag with an argument to tip that will be displayed over the encapsulated element:

<wz tip="That's ''that'' simple!">Roll over me!</wz>

Roll over me!

You can defer the tip to a tag using tagtotip instead of tip:

<wz tagtotip="tip">Roll over me!</wz>
<span id="tip">That's ''that'' simple!</span>

Roll over me! That's that simple!

This way you can make very complicated tooltips. In particular, you can wikify them! (including images, etc.)

Sticky tooltips

A tooltip vanishes the moment the mouse leaves whatever raised it, which is a problem as soon as there is something inside it to click on: the link cannot be reached. Add sticky in that case:

<wz sticky=1 tagtotip=wzsticky>my sources</wz>
<span id="wzsticky">[http://www.walterzorn.de Walter Zorn]'s tooltips, wrapped in [[wz]].</span>

my sourcesWalter Zorn's tooltips, wrapped in wz.

The tooltip then stays put for as long as the mouse is on it, and goes away shortly after the mouse leaves — so it can be walked into, read, clicked in, and abandoned, without ever asking for a click. That last point is the whole of it: over an image the click is already spoken for, since it is the click that zooms the thumbnail, and any tooltip that wants a click of its own is fighting the picture underneath it. This one wants none.

Four ways to make a tooltip stay, differing only in what makes it go:

sticky=	stays	goes
`1` (or hover)	while the mouse is on it	by itself, once the mouse leaves — hovergrace ms later, 400 by default
`click`	once clicked	never on its own; it is Walter's own CLICKSTICKY, unobtrusive until asked, but the click it asks for is the image's
`btn`	always	on its close button, which needs a title= to sit in
`plain`	always	when another tooltip replaces it

sticky=0 turns it back off, which is handy inside a template, and all of it works the same on tip and on tagtotip.

All of Walter's options

Every option of his library can be written as an attribute of the tag, in any case, and is passed through to it: width, title, closebtn, bgcolor, bordercolor, fadein, fadeout, delay, duration, offsetx, shadow, opacity, left, above, clicksticky, clickclose, followmouse, exclusive and the rest. They come after the sticky shorthand and so can correct it — sticky=1 hovergrace=1200 for a slower one.

<wz tagtotip=frank BGCOLOR=black BORDERCOLOR=black FADEIN=1000 FADEOUT=1000>Come Closer.</wz>

A width may be written 400 or 400px, both work. The two options that take a list rather than a value, CloseBtnColors and Fix, are the only ones left out.

Links also work in a plain tip now, where they used to come out as the parser's own placeholder: this one')" onmouseout="UnTip()">like this.

You can conveniently "tooltip" all sorts of things, such as images:

<wz tip="That's Walter on a quick 200km trip with his homebuilt
carbon lowracer. This guy is awesome.">[[Image:Kreuzot_ss.jpg‎]]</wz>

A typical use is to tooltip a text with an image (e.g., of Walter) which you can do as follows:


A typical use is to <wz tagtotip=waltershot width=426px>tooltip a text with an image
(e.g., of Walter)</wz> which you can do as follows:
<span id="waltershot">[[File:walter-zorn.jpg|426px]]</span>

Installation

Download the source tarball and uncompress in extension/wz/ directory.
This includes Walter Zorn's java script files. You need to declare them inside the HTML body section, typically by adding a line as follows in the php skin declarations (in the skin/ directory):

echo Html::linkedScript( '/extensions/wz/js/wz_tooltip.js' );

Add in your LocalSettings.php:

require_once("$IP/extensions/wz/wz.php");

Sources

v°0.1 — on 13, June (2011), first release.
v°0.2 — on 1 May (2014), includes options.

To do

Package as an extension to be realeased on Mediawiki.
Add support for image-maps (see here).

Contents

WZ