Link CSS Tool Tip

Summary: link markup for links with css popup tooltip text Version: 2008-04-10b Prerequisites: Status: new Maintainer: HansB? Categories: Links Markup Download: see Cookbook:LinkCSSTooltip

Questions answered by this recipe

How can I have links with styled and multi-line tooltips, even including images?


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.

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 Cookbook:CSSPopups.

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


  • 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.

Browser Compatibilities Issues

General issues
If text precedes a tooltip link the link is shown on the next line below (added new line).
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.
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

  • 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



Which browsers has this recipe been tested in? (I had a problem under Opera.) - RandyB 2008-04-18

There is a rendering bug in Opera 9.27, which is overcome in Opera 9.5beta. HansB?

Using the 2008-04-10 version of this recipe with Safari 3.1 and Firefox 3.0b5 causes the same problem: sometimes a new line occurs where it shouldn't. - RandyB 2008-04-19