Elena & Fabrice's Web
m |
m (→Usage) |
||
| (16 intermediate revisions by one user not shown) | |||
| Line 3: | Line 3: | ||
'''''wz''''' is a [[MediaWiki]] extension I wrote to enable tooltips (or mouse rollover). | '''''wz''''' is a [[MediaWiki]] extension I wrote to enable tooltips (or mouse rollover). | ||
| − | I rely for that on the [http://www.walterzorn.de/en/tooltip/tooltip_e.htm best tooltips] available on the web, those of | + | I rely for that on the [http://www.walterzorn.de/en/tooltip/tooltip_e.htm best tooltips] available on the web, those of [http://www.walterzorn.de Walter Zorn] (<wz tagtotip=wzphoto>see a photo</wz><span id="wzphoto">[[File:WalterZorn.jpg|300px]]</span>). |
== Usage == | == Usage == | ||
| Line 10: | Line 10: | ||
<pre> | <pre> | ||
| − | <wz tip="That's that simple!">Roll over me!</wz> | + | <wz tip="That's ''that'' simple!">Roll over me!</wz> |
</pre> | </pre> | ||
| − | <wz tip="That's that simple!">Roll over me!</wz> | + | <wz tip="That's ''that'' simple!">Roll over me!</wz> |
You can defer the tip to a tag using ''tagtotip'' instead of ''tip'': | You can defer the tip to a tag using ''tagtotip'' instead of ''tip'': | ||
| Line 34: | Line 34: | ||
</pre> | </pre> | ||
| − | <wz tip="That's Walter on a quick 200km trip with his homebuilt carbon lowracer. This guy is awesome.">[[Image:Kreuzot_ss. | + | <wz tip="That's Walter on a quick 200km trip with his homebuilt carbon lowracer. This guy is awesome.">[[Image:Kreuzot_ss.jpg|link=]]</wz> |
| − | == | + | 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> | |
| − | + | ||
| − | + | ||
<pre> | <pre> | ||
| − | + | <nowiki> | |
| − | + | 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> | ||
| + | </nowiki> | ||
</pre> | </pre> | ||
| + | |||
| + | == 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): | ||
| + | <code lang='php'> | ||
| + | echo Html::linkedScript( '/extensions/wz/js/wz_tooltip.js' ); | ||
| + | </code> | ||
* Add in your ''LocalSettings.php'': | * Add in your ''LocalSettings.php'': | ||
<pre> | <pre> | ||
| Line 49: | Line 58: | ||
</pre> | </pre> | ||
| − | == | + | == Sources == |
| − | * | + | * [[Media:Wz.tar.gz|v°0.1]] — on [[13 June|13]], [[June (2011)|June]] [[2011|(2011)]], first release. |
| − | + | * '''[[Media:wz-v0.2.zip|v°0.2]]''' — on {{thisday|1|May|2014}}, includes options. | |
| − | * | + | |
| − | == | + | == To do == |
| − | * | + | * Package as an extension to be realeased on Mediawiki. |
| + | * Add support for image-maps [http://alt-web.com/Tutorials/tooltips-on-image-maps.html (see here)]. | ||
== See also == | == See also == | ||
| − | * A blog post [[Blog: | + | * A blog post [[Blog:Hacks/We_have_mouse_rollover!|on the first release of this extension]] and another on [[Blog:Hacks/Walter_Zorn%27s_tooltips_v°0.2|version 0.2]]. |
* Walter Zorn's [http://www.walterzorn.de/en/tooltip/tooltip_e.htm original code]. | * Walter Zorn's [http://www.walterzorn.de/en/tooltip/tooltip_e.htm original code]. | ||
Latest revision as of 20:52, 6 August 2022
Contents |
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. For links, you'll need to wait that I implement the sticky option).
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
To do
- Package as an extension to be realeased on Mediawiki.
- Add support for image-maps (see here).
See also
- A blog post on the first release of this extension and another on version 0.2.
- Walter Zorn's original code.