Tooltip Macro
Last modified by Admin on 2022/10/31 00:13
 | Displays contextual information in a tooltip, when the user clicks or passes his mouse over a word or a sentence |
| Type | XAR |
| Category | |
| Developed by | Sergiu Dumitriu, Jérôme Velociter, Raluca Stavro |
| Active Installs | 54 |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
Usage
Content
The content is mandatory, and represents the tooltip content.
Parameters
| Name | Mandatory | Description |
|---|---|---|
| label | no | An optional label to display the tooltip hint |
| event | no | Optional event used for displaying the tooltip (the default event is 'mouseover') |
| id | no | Optional id of the HTML element used as tooltip hint |
| style | no | Optional CSS styles for the tooltip |
| hint-style | no | Optional CSS styles for the tooltip hint |
Examples
Simple usage
Code
{{tooltip}}
Orchidaceae, commonly referred to as the Orchid family, is a morphologically diverse and widespread family of monocots.
{{/tooltip}}
Orchidaceae, commonly referred to as the Orchid family, is a morphologically diverse and widespread family of monocots.
{{/tooltip}}
Result (as image)
Display tooltip on click
Code
{{tooltip label="epiphytes" event="click"}}
Said of a plant that grows upon another plant (such as a tree) non-parasitically or sometimes upon some other object (such as a building or a telegraph wire), derives its moisture and nutrients from the air and rain and sometimes from debris accumulating around it, and is found in the temperate zone (as many mosses, liverworts, lichens and algae) and in the tropics (as many ferns, cacti, orchids, and bromeliads) ? called also air plants. {{html}}<br />{{/html}} [[More details>>http://en.wikipedia.org/wiki/Orchidaceae]]
{{/tooltip}}
Said of a plant that grows upon another plant (such as a tree) non-parasitically or sometimes upon some other object (such as a building or a telegraph wire), derives its moisture and nutrients from the air and rain and sometimes from debris accumulating around it, and is found in the temperate zone (as many mosses, liverworts, lichens and algae) and in the tropics (as many ferns, cacti, orchids, and bromeliads) ? called also air plants. {{html}}<br />{{/html}} [[More details>>http://en.wikipedia.org/wiki/Orchidaceae]]
{{/tooltip}}
Result (as image)
Customize the tooltip content and the hint
Code
{{tooltip label="Vanilla" style="background-image: url(http://www.backgroundlabs.com/backgrounds/40.jpg); color: #fff; padding: 20px; width: 400px;" hint-style="background-image: none; padding: 0px; color: #d6ae00; cursor: help;"}}
Vanilla is a flavoring derived from orchids of the genus Vanilla native to Mexico. Etymologically, vanilla derives from the Spanish word "vainilla", little pod. Originally cultivated by Pre-Columbian Mesoamerican peoples, Spanish conquistador Hernán Cortés is credited with introducing both vanilla and chocolate to Europe in the 1520s. {{html}}<br />{{/html}} [[image:http://upload.wikimedia.org/wikipedia/commons/4/40/Vanilla_planifolia_1.jpg||width="70"]]
{{/tooltip}}
Vanilla is a flavoring derived from orchids of the genus Vanilla native to Mexico. Etymologically, vanilla derives from the Spanish word "vainilla", little pod. Originally cultivated by Pre-Columbian Mesoamerican peoples, Spanish conquistador Hernán Cortés is credited with introducing both vanilla and chocolate to Europe in the 1520s. {{html}}<br />{{/html}} [[image:http://upload.wikimedia.org/wikipedia/commons/4/40/Vanilla_planifolia_1.jpg||width="70"]]
{{/tooltip}}
Result (as image)
Display tooltip on an existing HTML element
Code
[[image:http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Haeckel_Orchidae.jpg/425px-Haeckel_Orchidae.jpg||width="100" id="Haeckel_Orchidae"]]
{{tooltip id="Haeckel_Orchidae" style="background-color: #f88158; border: none; color: #fff; padding: 10px; text-align: left; width: 230px;"}}
Color plate from Ernst Haeckel's {{html}}<i>Kunstformen der Natur</i>{{/html}}
{{/tooltip}}
{{tooltip id="Haeckel_Orchidae" style="background-color: #f88158; border: none; color: #fff; padding: 10px; text-align: left; width: 230px;"}}
Color plate from Ernst Haeckel's {{html}}<i>Kunstformen der Natur</i>{{/html}}
{{/tooltip}}
Result (as image)
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Release Notes
v1.2.5
- Small update to fix the opacity issue on the new version
v1.2.4
- Moved the Tooltip macro to the xwiki-contrib on github. Fixed the CSS selectors which caused the macro to stop working as intended.
v1.2.3
- Fixed the selection container for the javascript in order for the tooltip to work under view and edit mode (inline) and the visibility scope.
v1.2.1
- Small update to fix velocity parsing error.
v1.2
- Added new parameters: event, id, style and hint-style
