DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:tooltip

tooltip Plugin

Compatible with DokuWiki

  • 2017-02-19 "Frusterick Manners" unknown
  • 2016-06-26 "Elenor Of Tsort" unknown
  • 2015-08-10 "Detritus" yes
  • 2014-09-29 "Hrun" yes

plugin This plugin lets you mark some text with a tooltip.

Last updated on
2009-10-04
Provides
Syntax

Tagged with annotations, tooltip

:!: New Release v1.8, with support for text renderer!

Welcome to the Tooltip Plugin page. This plugin does essentially what the name suggests: marks some text with a visual aid that shows in mouse-over, what's called a tooltip. No JavaScript nor any other kind of scripting involved1). It's all CSS, baby!

I'm Luis MachucaLuis Machuca Bezzaza
ryan.chappelle

, a DW fan who's collaborated with some templates and plugins before, making suggestions and the like. This is my second attempt at an actual, more direct, collaboration in the form of a special markup plugin.

Feel free to use and comment (see ⇒Discussion).

Syntax

Plain and simple, although, I admit, it could be better:

<ttip:style:marked_text> tooltip_text </ttip>

:!: Alternatively, if you want to mark a single word only with a tooltip:

{!word:tooltip_text}}

Details:

  • note that the syntax is “ttip”, not “tooltip”, as to keep it short.
  • the colon (“:”) in “tooltip:…” is mandatory.
  • You can use any character for the marked text, except for greater-than (“>”) which is used as the end delimiter. I'm working on a way to solve this.
  • The content inside the tooltip is limited to a single paragraph, sans some allowed syntax elements which include links, newlines2) and the like.

Parameters

Parameter Name Expression Effect
style [a–zA–Z0–9\_-]+ Not mandatory (see examples) — The CSS style used to render the tooltip. This style has to exist in a valid DokuWiki CSS file (including the recommended userstyle.conf) in the form .tooltip_some_class.
marked_text any text The text that is marked with the tooltip information.
word single word A single word that is marked with the tooltip information.
tooltip_text any text The text that is contained in the tooltip. The text contained in the tooltip also supports DokuWiki syntax - such as bolding, italics, underline, strike through, superscript, subscript, smileys, and special characters, as well as internal and external links.

Installation and Usage

How to Install

Use the download link above and feed it to your Plugin Manager.

Shall the link above fail, you can try directly from the Demo Page and search the list of available files for the plugin.

No Plugin Manager? Download the source code and unzip into the plugins directory of your DokuWiki installation. A folder named tooltip shall be created containing the source code and style sheets.

Demo

:!: (Neo) Demo Site is now up! (Sep 2010)

Note language is Spanish but online translators shall do a good job with it.

The effects of the tooltip plugin upon mouse-over.

How to Use

Here come some usage examples:

//Today is not a good day to be <ttip:warking>"wark" is the sound made by a [[wp>Chocobo]]</ttip> around.//

This displays as follows:

Today is not a good day to be warking around.

You'll notice that the word “warking” is marked differently. When you hover your mouse over the marked word, a box with the template reveals beneath. The tooltip contains the phrase «“wark” is the sound made by a Chocobo». That will respond the first question as to what a “wark” is, although now you may have been left with the question as to what a Chocobo is

The box remains visible for as long as the mouse is over the marked word or the tooltip box. Clicking on the tooltip box currently has no effect.

The key to understand how the {!LHC:short for //Large Hadron Collider//}} works, is to remember that, after all, it is a machine.

This will show the text:

The key to understand how the LHC works, is to remember that, after all, it is a machine.

The acronym LHC, which stands for the LHC, will be marked with a tooltip, containing a description. Also note that since this version (Apr 2009), limited wikitext formatting is enbaled inside tooltips, allowing for syntax such as the following to work:

You can {!contact:[[mailto:my-email@emailprovider.org]]}} me to request more information

The default style, aptly named default mirrors the “prefocus outline” or “spatial navigation” feature of the Opera Browser, which I think is a notorious and simple way to mark something for instant attention. Some elements of the styling, however, adapt to the DokuWiki template installed, so you may experience different text and background colors.

A new added style named winlike attempts to emulate the GUI tooltips with cream colored background that appear in some Windows XP operating systems.

Customization

Want to create your own Tooltip Style? Follow these instructions.

1.- Copy the following text into a file:

/**
 *  A style sheet that can be modified to create your own Tooltip Plugin style.
 *  Change the name particle (_NAME) as you see appropiate and follow the instructions.
 *  Substitute in your conf/userstyle.css file.
 */
 
div.dokuwiki span.tooltip_NAME {
  display: inline-block;
  position: relative;
  /* other styles: border, padding, color */
  }
 
div.dokuwiki span.tooltip_NAME .tip {
  display: none; /* DO NOT MODIFY */
  }
 
div.dokuwiki span.tooltip_NAME:hover {
  z-index: 998;
  }
 
div.dokuwiki span.tooltip_NAME:hover .tip {
  display: block;
  position: absolute;
  top: 100%;
  left: 5px;
  z-index: 999;
 
  /* other styles: box size, layout, border, font style, color, etc... */
  }

2.- Save the file, just in case.

3.- Substitute NAME with the name you want for your style (check that it is a valid CSS stylename).

4.- Modify the code above to stylize the tooltip as you wish, taking care of the instructions in the comments.

6.- Copy the resulting code into your conf/userstyle.css file (not into the plugin's style.css or it will be overwritten).

7.- Clean your DokuWiki cache and use your new style!

:?: Want to collaborate? If you want your style to be integrated to the Tooltip Plugin, send it to me, and we'll talk!

Details

General advice:

  • Always clean your DokuWiki cache after updating or modifying a style.
  • Remember that tooltips can not span multiple paragraphs.
  • If you want to colaborate, check the ↑Customization and ↓Localization sections.

Browser Support

The plugin has been tested with Firefox 2.0 onwards as well as Opera 9.5 onwards. They all will display correctly, although presentation may be corrupted in any of the following two cases:

  1. the marked tooltip occurs very close to the end of the viewport, by either being too close to the right side of the screen, or being too close to the bottom of the screen. In this case, the tooltip box essentially “disappears” to the right (part of it may still be visible). I still haven't found a practical remedy for this.
  2. another underline syntax is already applied to the marked text (by either the DokuWiki __text__ syntax, or applied CSS). In this case line height may be altered for both the marked text and the tooltip box, whose contents may also overflow.

Any other browser that correctly implements the CSS2 spec will display properly when using this plugin. However, for non-conforming browsers as well as text-mode rendering a graceful degradation should be observed that allows clients to see either both the text and tooltip, or nothing at all.

If the DokuWiki installation has been set up to deliver content via the text renderer, tooltip content will be visible and clearly delimited from the surrounding text.

Localization

Localized plugin descriptions have been included for the following languages:

  • es: Spanish
  • en: English
  • eo: Esperanto (a beta version, based on what little I remember about the language).

With these language strings, you will see the plugin name and description in your own language if you point to the “information” button at the Plugin Manager.

:?: Want to collaborate? Copy one of the language files, edit according to your language, and send it to me! (You will be credited of course).

Source Code

The source code is included in the plugin, of course.

If you want to install the plugin by-hand, just do the following:

  1. Download and unpack the contents of the plugin file.
  2. Navigate to the “plugins” directory of your DokuWiki installation, and create a folder called tooltip.
  3. Copy the extracted contents: the file style.css and the folder syntax, to the folder you've created.
  4. Check that the file and folder permissions match that of other installed plugins. The webserver should be able to read all contents.
  5. As a safety measure, clean your DokuWiki cache.

Development Information

Rendering Information

The plugin has been tested to be compatible with the following renderer plugins:

  • no-details-XHTML (the one I use)
  • text (basic support, usable but not yet completed)

Changelog

(Copy-pasted from the included changelog)

2009-10-04  Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>

    * DokuWiki page: corrected download and demo links to HTTPS.    

2009-10-03  Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>

    * Version: 1.8
    * lang/: (add) Support for English and Spanish languages (en, es).
    * lang/: (add) Partial support for Esperanto language (eo).
    * syntax/tooltip.php, syntax/short.php: Updated getInfo() 
    with language support, mail address and demo page link.
    * syntax/tooltip.php, syntax/short.php: changed XHTML container to 
    'span' to improve compatibility and prevent display issues with browsers.
    * syntax/tooltip.php, syntax/short.php: added text ('text') renderer
    support with limited (simple) format.
    * style.css: (update) set "div.dokuwiki" specifiers to all CSS styles.
    * style.css: (add) added "winlike" style.
    * style.css: (bug) solved CSS issue that made boxes transparent in lists
    (raised by: Unknown@Dokuwiki page)

2009-06-01  Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>

    * DokuWiki page: (add) added pictures

2009-06-01  Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>

    * README: (add) first implemented
    * ChangeLog: (add) first implemented, lifted from:
    http://www.dokuwiki.org/plugin:tooltip

2009-04-11 Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl> 

    * Version: 1.5
    * syntax/*.php: enabled parsing of internal wikitext
    * style.css: modified default styles to use Opera-like tooltip outlines.
    * DokuWiki page: corrected download link (thanks to Winfried Detmar).

2008-08-08  Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl> 

    * Version: 1.0
    * First documented release

Things to Be Done

2009-10-03:

  • perform text-mode tests to check that the tooltip information is parseable/searchable.
  • study the implementation of ODT-mode render compatibility.
  • …provide a toolbar button?
  • correcting tooltip display when used too close to the viewport borders. Yes I'm still having this issue…

2009-04-11:

  • Thanks to Winfried Detmar for warning me about the non-working link, as well as the required updates to the Source Code section.
    • Corrected the download link (see above).

2009-04-07:

  • I shall examine if the current longhand syntax (the text first and the tooltip next) is the most appropriate, given that most tooltip formats such as the <ABBR> tag do it the other way around. I'd be glad to receive any feedback about the issue.
  • improve wikitext parsing so that more complex links, as well as images, work.

2008-08-08: I will be working in the following missing features:

  • parsing of the internal wikitext (I'm learning how to use the parse modes):!: implemented in the April 2009 release.
  • a shorthand syntax, for quick (one-word) tooltips:!: implemented in the April 2009 release.
  • allowing the plugin to work inside tables. Solved, and I hadn't even realized… :)

Author Developments

Other Plugins by
Luis Machuca:
progrecss
clock
divalign2
hide
gil

Thanks

We're talking about tooltips. We're talking about CSS only. No JavaScript, no server side scripting. No DHTML, no nothing dynamic. So, who else to ask?

Of course the idea came from Eric Meyer, CSS Genius, via a nice proxy application of his ideas by “SantaKlaus” at http://www2.psacake.com:81/web/jl.asp. I've just integrated their ideas to DokuWiki, so no credit for the “tooltip idea” goes to me. It's all to the geniuses who DO know how to play the CSS way.

Credits to me is the plugin implementation only. I've released it under the GPL License.

Other plugins by the same author:

Discussion

Any :?: will be welcome. As well as suggestions. Just edit here and carpet bomb me3) with questions.

Q1: Does the plugin support something like <ttip:default>Mail Me!|Phone +49 606 111 234</ttip> ?

A1: As of my testing, no, as there is no support for any formatting inside the tooltip at the moment. I hope to implement it as soon as I learn the correct usage of the container and formatting modes, so stay tuned. Thanks.
A2: yes! – this feature was finally implemented.
I think that's a good function and now a <ttip:default> test | ich finde es eine gute funktion und jetzt ein test </ttip> is the plugin on?
No, the plugin is not installed in this wiki; a link to the demo site is available, however.

Q2: Is it just me, or when there is a list of items using tooltip, the popup is transparent on top of the text making it illegible? It is fine on top of regular text, but testing on Opera and Firefox, it displays a jumble of text. I know the plugins isn't installed here, but ie:

  • <ttip:default:click me>This is a test.</ttip>
  • <ttip:default:click me>This is a test.</ttip>
  • <ttip:default:click me>This is a test.</ttip>

Only the third tooltip will be easily legible cause the others interfere w/ the popup.

Can confirm that at least Firefox 3 shows this problem. Opera 10 alpha shows almost-OK (it shows the tooltip borders rigged and the text “behind” the box glued to the tooltip) and I'm sure any official Opera release should show just as Firefox does. I'm going to guess, out of a simple test, that forgot to put a z-index rule somewhere in the CSS. Will try to fix. Thanks for the advice. – — Luis Machuca B. 2009/04/29 07:33

Q3: There are two problems with IE browser (IE 7.0). In the case of <ttip:…> we have a new line (carriage return or new line?) before and after marked text. In the case of {!…} - single word - we have trimming spaces after marked word. Mozilla Firefox shows marked text correctly. Are you planning IE browser support ?

Noted the issue. As I mentioned above, I officially do not support IE, and for a number of reasons4); however thanks to the fact that you describe the problem in detail I think I can pinpoint the fault. It's most likely the fact that IE doesn't support display:inline and display:inline-block correctly (or at all) plus min/max width properties. I'll have to first trim down the CSS to the absolute minimum for testing, but I think I can work out something to increase the plugin compatibility with IE. I'll be reporting shortly and most likely requiring your further comments. Thanks for your input. — Luis Machuca Bezzaza 2009/09/16 07:36
Solved the issue above. It was a corrupted PHP file. — Luis Machuca Bezzaza 2009/10/04 22:28

Links seem broken, both. 21/07/2010

University servers went through some maintenance. Should be solved by… now. — Luis 2010/07/22 23:37

Q4: Would it be possible to choose the width of the box? When a text is 20 short words long, the box is vertical, and I would prefer to have it horizontal, to improve its lisibility. Thanks a lot for this nice plugin. Michel H.

In theory, it should be possible by passing extra argument. However I'd have to solve some parsing issues first. I'll examine this issue.

In the meantime, if required you can overwrite the CSS for the plugin via $DOKU_CONF/userstyle.css, but this will affect all invocations of the syntax. — Luis Machuca BezzazaLuis Machuca Bezzaza
ryan.chappelle

2012/01/20 16:32

Q5: Would it be possible to remove the adding space after every “!word” mark, as it makes it complicated to add a footnote style tooltip in between a word and a dot? (Ends up looking like this: “..some text[TAG] . More text…” Thanks a lot! This plugin has made marvels for me.

1)
beyond the PHP parser for the plugin itself
2)
as enabled with the \\ syntax
3)
so to speak
4)
one of them that to support CSS in IE one has to hack around the styles to the point they simply become ugly (and outright undocumentable)
plugin/tooltip.txt · Last modified: 2015-09-13 17:37 by Aleksandr