{tooltip:element:html}

Description

Attaches a rich pop-up tooltip to a page element. The element is named by its id or by a CSS selector; the tooltip body is HTML. Output of the command itself is always empty - it works as a side effect, registering the Tippy.js library and an init call for the page. The visible tooltip therefore appears only when the page also emits the loaded libraries, which on a Site module means a generate HEAD and a generate FOOT in the template. The selector rule: if the first argument contains only letters, digits, underscore or hyphen it is treated as an element id (a hash is prepended); any other character (a leading dot or hash, a space, a bracket) means it is used verbatim as a CSS selector. The underlying library may be swapped for an equivalent one later, so do not rely on Tippy specifics; the command stays functional.

Parameters

element required default (none - required)

The element the tooltip is attached to. If it contains only letters, digits, underscore or hyphen it is read as an element id and a hash is prepended automatically (so myicon targets the element with id myicon). If it contains any other character - a leading dot for a class, a leading hash, a space, a bracket - it is used verbatim as a CSS selector and may match several elements at once.

html required default (none - required)

The tooltip body. HTML is allowed (the library is initialised with allowHTML true), so you can include bold text, line breaks and links. This text is escaped for JavaScript when the init call is built, so quotes and newlines in it are safe.

Examples

virtual{tooltip:helpicon:Need a hand with this field?}

Expected(empty - attaches a tip to the element with id helpicon)

Plain first argument (letters only) is read as an element id and a hash is prepended, so this targets the element with id helpicon. Output is empty; the tip shows in the browser once the page emits the loaded libraries.

virtual{tooltip:.term:Hover for the definition.}

Expected(empty - one tip wired to every element with class term)

A leading dot is a CSS class selector, so one command can wire the same tip to every matching element on the page (every element with class term here).

test[{tooltip:helpicon:Help text}]

Expected[]

Actual[]

The command itself prints nothing - it only registers the library and the init script. The visible tip is produced later by the loaded JavaScript. Wrapped in brackets here to show the output is empty.

virtual{tooltip:#savebtn:Saves the form without leaving the page.}

Expected(empty - same as the id form, hash given explicitly)

A leading hash makes the first argument a CSS selector that is used verbatim. For a single id this behaves the same as writing the bare id.

virtual{tooltip:logo:<b>ActionApps</b><br>Collaborative publishing.}

Expected(empty - the tip body renders the bold text and the line break)

The tooltip body is HTML (the library runs with allowHTML on), so bold, line breaks and links work. The body is escaped for JavaScript when the init call is built, so quotes are safe.

test[{tooltip:helpicon}]

Expected[]

Actual[]

Both arguments are required. With the body missing the guard fails: nothing is output and no library or init script is registered. The empty brackets confirm the empty output.

← All expressions