PmWiki | Cookbook / DomTT

Summary: Use divs as tooltips

Version: 20061029

Status: Stable

Prerequisites: pmWiki-2.1.x and domTT

Maintainer: Dfaure

Categories: [Update Me]

Download: domtt.php Δ

Questions answered by this recipe

How may I provide comfortable contextual help/information in my wiki pages?

Description

This recipe integrates the DOM Tooltip (aka domTT) Javascript widget into PmWiki, allowing you to use division blocks as popup content.

Notes

Installation

Fetch the domTT installation archive and extract it into your /pub to get a /pub/domTT directory tree available (the /pub/domTT/examples/index.html and related pages should be browseable).
Download the domtt.php Δ cookbook script, put it in your /cookbook directory and enable it in your local customization files.

Basic Usage

In a wiki page:

Define a hidden identified division block as:

>>comment id=my_div<<
This is a division block identified as 'my_div'
>><<

Then refer to it with the following markup:

This [:my_div:text] will display the related division as a popup

Note: Although it looks like a link, the markup only triggers popup window (for now).

Into the details

Before all, since the binding between the division blocks and the related popup markups is made via javascript in the client browser, all the involved data must be present in the wiki page (so, externally defined division blocks should be included to be useable there).

The popup markup general syntax is:

[:DIV_IDENTIFIER OPTIONS: LINK_TEXT]

with:

DIV_IDENTIFIER: An HTML/Javascript compliant identifier refering to the division block to use as popup window content, i.e. any combination of letters, digits, dashes and underscores.
OPTIONS: Miscellaneous parameters handled by the domTT script itself and described in the distribution at /pub/domTT/HOWTO.html. Parameters are set as param='value', boolean ones as +param (true) or -param (false).
LINK_TEXT: Any text that can be used in a link.

As an example, the following markup

[:tip1 +trail grid=10:Tip1]

will show the div named as 'tip1' as a popup trailing the mouse in every direction on a 10 pixel grid.

When needed, tooltip divs may also use the specific [::LINK_TEXT] as a custom self close link.

Configuration variables

The following variables are available to configure the recipe:

$DomTTPubDir

Where to find the domTT distribution (defaults to "$PubDirUrl/domTT").
Example:

$DomTTPubDir = "$FarmPubDirUrl/domTT";

$DomTTStyles

Various style definition names used by the recipe (obsoletes the previously documented $DomTTstyleClass).
Names are:

class: The div tooltip style (defaults to 'domTTClassic').
tooltiplink: The link style (defaults to 'tooltiplink').
linkclosetooltip: The tooltip div custom self close link (defaults to 'linkclosetooltip').

These definitions may also be set as markup parameters.

$EnableDomTTStylesOverload

Allow style changes via markup parameters (defaults to 1).

$DomTTParams

Predefined parameters (defaults to nothing).
Example:

$DomTTParams['+'] = array('trail');
$DomTTParams['fade'] = 'both';
$DomTTParams['fadeMax'] = '100';

Contributors

Dfaure

Release Notes

2006-08-30 Initial release.
2006-08-31 Fixed conflicting window.onload chain call (Gemini and Fixflow skins).
2006-09-05 Renamed variable. Fixed script inclusion order.
2006-10-25 Added RecipeInfo data.
2006-10-26 Cleaned code.
2006-10-29 Added style overloading.

DomTT