DomTT

Summary: Use divs as tooltips
Version: 20180420
Status: Stable
Prerequisites: pmWiki-2.1.x and domTT
Maintainer: Dfaure
Discussion: DomTT-Talk
Categories: Markup PHP72
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

  1. 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).
    • Linked version does not work in IE 8. Download the IE8 supported version here. kaptainkory June 06, 2009, at 07:04 PM
  2. 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

See Also

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.

Test

The recipe was enabled for this page.

>>comment id=message1<<
Hello %red%World%%!

A '''new''' line.
>><<
This [:message1 +trail grid=10:text will display the related division] as a popup.

This text will display the related division as a popup.

Comments

See discussion at DomTT-Talk

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.