====== tooltip Plugin ====== ---- plugin ---- description: This plugin lets you mark some text with a tooltip author : Luis Machuca Bezzaza email : lambalicious [at] tuta [dot] io type : syntax lastupdate : 2009-10-04 compatible : Hrun, Detritus, Binky, Weatherwax, Adora Belle, Angua, Rincewind depends : conflicts : similar : autotooltip tags : annotations, tooltip downloadurl: http://ryan.gulix.cl/dw/_media/desarrollo/dokuwiki/dw-plugin-tooltip-latest.zip donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=T44AQDXJQJTJQ&source=url ---- ^ :!: **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 [[wp>tooltip]]. No JavaScript nor any other kind of scripting involved((beyond the PHP parser for the plugin itself)). It's all CSS, baby! I'm [[user>ryan.chappelle|Luis Machuca]], 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: tooltip_text :!: 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, newlines((as enabled with the ''%%\\ %%'' syntax)) 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 ==== Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually. ==== Demo ==== :!: [[http://ryan.gulix.cl/dw/desarrollo/dokuwiki/plugin-tooltip|(Neo) Demo Site is now up!]] (Sep 2010) Note language is **Spanish** but online translators shall do a good job with it. ^ {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-tooltip-01.png?300&nolink}} ^ | 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 "wark" is the sound made by a [[wp>Chocobo]] 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 [[wp>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 [[wp>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: - 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. - 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 [[plugin:text|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'': [[wp>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: - Download and unpack the contents of the plugin file. - Navigate to the "plugins" directory of your DokuWiki installation, and create a folder called ''tooltip''. - Copy the extracted contents: the file ''style.css'' and the folder ''syntax'', to the folder you've created. - Check that the file and folder permissions match that of other installed plugins. The webserver should be able to read all contents. - As a safety measure, __clean your DokuWiki cache__. ===== Development Information ===== ==== Rendering Information ==== The plugin has been tested to be compatible with the following [[http://www.dokuwiki.org/plugins?plugintype=8|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 * DokuWiki page: corrected download and demo links to HTTPS. 2009-10-03 Luis Machuca Bezzaza * 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 * DokuWiki page: (add) added pictures 2009-06-01 Luis Machuca Bezzaza * README: (add) first implemented * ChangeLog: (add) first implemented, lifted from: http://www.dokuwiki.org/plugin:tooltip 2009-04-11 Luis Machuca Bezzaza * 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 * 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 ''%%%%'' 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: | [[plugin:progrecss]]\\ [[plugin:clock]]\\ [[plugin:divalign2]]\\ [[plugin:hide]]\\ [[plugin:gil]] | ---- datarelated ---- cols : author title : Other Projects ---- ====== 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 [[http://meyerweb.com/eric/|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**: ---- datarelated ---- cols : author title : Other Projects max : 5 ---- ====== Discussion ====== Any :?: will be welcome. As well as suggestions. Just edit here and carpet bomb me((so to speak)) with questions. Q1: Does the plugin support something like **[[my@email.com|Mail Me!]]|Phone +49 606 111 234** ? >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 test | ich finde es eine gute funktion und jetzt ein test 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: * This is a test. * This is a test. * This is a test. 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@gulix.cl|Luis Machuca B.]] 2009/04/29 07:33// Q3: There are two problems with IE browser (IE 7.0). In the case of 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 reasons((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) )); 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@gulix.cl|Luis Machuca Bezzaza]] 2009/09/16 07:36// >>Solved the issue above. It was a corrupted PHP file. --- //[[luis.machuca@gulix.cl|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.machuca@gulix.cl|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. **[[emache47@gmail.com|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. --- [[user>ryan.chappelle|Luis Machuca Bezzaza]] //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.