• View
• Edit
• History
• Attach
• Print
• Backlinks

LinkCSSToolTip

Questions answered by this recipe

• How can I have links with styled and multi-line tooltips, even including images?
• How can I make a menu drop down from a link?

Description

Download linkcsstooltip.phpΔ, copy to cookbook folder and add to config.php:

This adds two new link markups for additional tooltip text:

• [[Target | link text |: tooltip text :]]
• [[Target | + |: tooltip text :]] (link text is the title of the link target page)

You can use wiki styles in the markup for the tooltip text. Or change the css styling to your needs and liking. Use wikistyle parameter width=<value> to set the width for the tooltip, bgcolor=<value> to set the background colour.

In fact you can use any markup inside the tooltip, even page text varibles, markup expressions, conditional markup, page includes etc.

The tooltip text will pop up immediately when rolling the mouse over the link. It also works for IE (improving on the technique used in CSSPopups.

Entering \\ in the tooltip text will insert a line break.

Examples with variables:

PTV as tooltip

[[TargetName | link text |: {TargetName$:PTVName} :]]

PageVar as tooltip

[[TargetName | link text |: {TargetName$PageVar} :]]

Title as tooltip (as example of a PageVar)

[[TargetName | link text |: {TargetName$Title} :]]

Description as tooltip (as example of a PageVar)

[[TargetName | link text |: {TargetName$Description} :]]

Examples of dropdown menus

A drop-down menu whose items are defined by page category

[[MyMenu|Hover here for MenuItem pages|:(:pagelist link=Category.MenuItem fmt=#title:):]]

A menu whose items are defined in a wikitrail, and drops down from an icon link

[[MyMenu|Attach:Main./MyMenuIcon.png|:(:pagelist trail=MyMenu fmt=#title:):]]

A drop-down menu with formatting defined on another page

[[MyMenu|Hover here to see MyMenu page, or click to go there|:(:include MyMenu:):]]

Notes

• You can use a page text variable PTV as tooltip and in this way include content from other locations, even other pages.
• You can use (:include ... :) to include content from other pages in the tooltip.
• You can break the tooltip text over several lines as well, even though the link will be displayed inline. But do not insert empty lines! Also block markup may break the tooltip text.
• Style attributes are loaded automatically with the markup. You could add the style attributes to pub/css/local.css instead of using $HTMLStylesFmt in the markup function.
• To allow a user to move the cursor to the content of the tool tip, without the tool tip disappearing, make it pop up adjacent to the link by changing in $HTMLStylesFmt the value of top to top:0.0em;
• Width of a tooltip can be set using wikistyles, like %width=20em%, as part of the tooltip text.
• Relative position to link can be set, using wikistyles left=<value> and top=<value> within tooltip text, for example %left=5em top=0%

Browser Compatibilities Issues

General issues

If text precedes a tooltip link the link is shown on the next line below (added new line).

This can easily be corrected. Just replace each "div" in the PHP file with "span". Ben

Opera 9.27

There is a rendering bug in Opera 9.27, showing non-rendered horizontal stripes in the tooltip, till mouse is moved over the tooltip. This is overcome in Opera 9.5beta.

Firefox

If another page is included as a tooltip, and that page has a link which contains wiki style markup, then the tooltip appears broken.

Release Notes

• 2020-07-26: modified the ToolTipLink function to apply wiki block styles to the ttip span element, rather than a p element inside it. This way tooltip width and background colour can be given inside tooltip markup, like . Allowed left=<value> and top=<value> as part of wiki styles within tooltip text, to change tooltip position relative to the link.
• 2017-06-16: changed Markup_e() to Markup() call, for PHP 7.2 compatibility.
• 2014-02-22: Updated markup definitions for PHP 5.5 compatibility.
• 2008-04-10b: modified evaluation of page variables in link target
• 2008-04-10a: added "title" markup [[Target | + |: tooltip text :]]. Added #anchor Target capability. Moved $HTMLStylesFmt[..] outside markup function, so tooltip links will work in sidebars.
• 2008-04-10: initial release

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See Also

• CSSPopups
• LinkPageExistsFmtTooltip

Contributors

Comments

See discussion at LinkCSSToolTip-Talk