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

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; Note that there are two "top" settings to change.

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.

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

• 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

I use this recipe, Thanks

FidelioEspoir, This cookbook is very useful to create menubar. I don't use anymore sidebar.

Comments

I'm no CSS expert, but I managed to get rid of the unwanted newline by replacing the initial 'div' tag (the one with class="ttwrap") with a 'span', and changing all the div.ttwrap to span.ttwrap in the CSS. I have no idea if there are any repercussions, but it seems to work. The rest is just awesome :) Thanks. - Ben 2010-09-02 21:46

Is it true that for this recipe to work in IE6 you need to install the WikiStylesPlus recipe or something similar to enable hover on non-link elements? bang February 20, 2010, at 02:26 PM

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

I have this working where it includes another page as a tooltip. The problem is I have many links on the page.

When the tool tip pops up with a link underneath it. The link shows through (tooltip is translucent to links underneath) This appears to only be in IE(7). In Firefox its ok. - Nigel 2008-02-10

A possible fix for this problem is to change this line in linkcsstooltip.php:

to

and change this line:

to this:

bang February 20, 2010, at 02:26 PM

[[Home.Lnk|Text|:(:include pagelink.link:):]]

I have this working where it includes another page as a tooltip. If the text is on a single line it causes scrollbars and text is off the page. Only occurs in Firefox. IE(7) is Ok - Nigel 2008-02-10

Excellent recipe, Hans!! FYI, I modified it so you can also have:

• [[Target | Short link text |: + :]] (tooltip text is the title of the link target page)
  That may help others too! Or maybe an example of which PTV to use to include the Description or title in the tooltip markup. Thanks again!!

I added examples for variables as tooltip like PageVar 'Title'. Please send me your mod script, perhaps I can adopt it? HansB December 11, 2008, at 04:51 AM