• View
• Edit
• History
• Print
• Backlinks

HoverNotes

Description

Create hover notes, which will appear when hovering over a hover tag symbol (or text) To achieve this the recipe adds a markup and some css rules. No javascript is used. The markup places a hover symbol, in the example a star character, as superscript, so it appears like star to click in order to see more.Placing the cursor over it will make the note appear in a hover box, and moving away from it will make it disappear again.

Installation

Add to config.php:

Markup("(^",'>links','/\(\"(.*?)\"\)/',"HoverNote");
function HoverNote($m) {
    $tag = '★'; //alternative examples: ☆ ♣ ♠ ♥ ♦ 
    return "<span class='popbox'><sup>$tag</sup>".
        "<p class='popnote'> $m[1] </p></span>";
}

Add to local.css:

p.popnote { display:none; }
span.popbox { display: inline-block; position:relative; }
span.popbox sup { font-size: 0.9em; color:red; } 
span.popbox sup:hover + p.popnote {
  display:block; position:absolute;
  width:6em;
  max-width:10em;
  font-size:0.75em;
  line-height:1.1em;
  padding: 0.2em .5em;
  background-color:#ffc;
  border: 1px solid black;
  border-radius: 5px;
  z-index:1;
}

If you use GUIEdit buttons you can add one to insert the markup, or highlight the text for the hover note and click the GUI button
Add to config.php:

$GUIButtons['hovernote'] = array(750,'(^','^)','$[Hovernote]',
 '$GUIButtonDirUrlFmt/starblk.gif"$[Add a hover note]"');

Change the number to suit the position you want the button to be in.
Download and add it to your GUIButton directory.
Test if all is working.

Configuration

You may wish to change some of the css attributes, like colours, sizes, border to customise to your delight.
You may also wish to customise the hover 'tag' the markup is inserting to see instead of the hover note text. I used a 'filled star' HTML entity character, for simplicity.

Usage

If you use GUIButtons click on the star button to insert the markup, for the hover note text to be written. Or write the note first, select it, and click on the button to have it enclosed with the markup: (^your hover note text^). Or without GUIButton just write the hover note markup and your text.

After the page is saved the hover note text is replaced by the hover tag, in the example this is a star. Hover over it and the hover note appears in a box as a popup box. That's all, nothing to click on.

Notes

Change log / Release notes

• 2026-01-30: 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

Contributors

Comments

See discussion at HoverNotes-Talk