Tooltip Macro

Last modified by Admin on 2024/07/08 00:11

cogDisplays contextual information in a tooltip, when the user clicks or passes his mouse over a word or a sentence
Developed by

Sergiu Dumitriu, Jérôme Velociter, Raluca Stavro

Active Installs39
1 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager




The content is mandatory, and represents the tooltip content.


labelnoAn optional label to display the tooltip hint
eventnoOptional event used for displaying the tooltip (the default event is 'mouseover')
idnoOptional id of the HTML element used as tooltip hint
stylenoOptional CSS styles for the tooltip
hint-stylenoOptional CSS styles for the tooltip hint


Simple usage


  Orchidaceae, commonly referred to as the Orchid family, is a morphologically diverse and widespread family of monocots.

Result (as image)


Display tooltip on click


{{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>>]]

Result (as image)


Customize the tooltip content and the hint


{{tooltip label="Vanilla" style="background-image: url(; 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:||width="70"]]

Result (as image)


Display tooltip on an existing HTML element


[[image:||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}}

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:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes


  • Small update to fix the opacity issue on the new version


  • Moved the Tooltip macro to the xwiki-contrib on github. Fixed the CSS selectors which caused the macro to stop working as intended.


  • Fixed the selection container for the javascript in order for the tooltip to work under view and edit mode (inline) and the visibility scope.


  • Small update to fix velocity parsing error.


  • Added new parameters: event, id, style and hint-style

Get Connected