Life's a garden. Dig it.
Tooltips let you add information to a post that's hidden by default and appears in a pop-up window whenever the reader hovers over a specific piece of text.
Try it by hovering over me.
You might consider using a popover which is similar to tooltip, but more mobile friendly, as popovers are triggered by a button click instead of a mouse hover event.
Notes
- Tooltips can be defined inline or block.
- Tooltips have a trigger element and a content element.
Inline tooltip¶
Declare an inline tooltip with the :tooltip text directive.
The largest telescope in space is
:tooltip[JWST]{ text="James Webb Space Telescope" }.
The largest telescope in space is JWST.
Trigger¶
The trigger element should be defined in the :tooltip[] label, inside the square brackets. In this example, the trigger is JWST as indicated by the dotted underline in the rendered text.
Content¶
The content should be defined in the text property, in curly braces. In this example, the tooltip content is James Webb Space Telescope.
Block tooltip¶
Declare an block tooltip with the :::tooltip container directive.
The largest telescope in space is JWST.
As the largest telescope in space, JWST
is equipped with high-resolution and
high-sensitivity instruments.
:::tooltip[JWST]
**James Webb Space Telescope.**
- Launch date: 25 December 2021
- Launch mass: 6,500 kg
- Power: 2 kW
:::
The largest telescope in space is JWST. As the largest telescope in space, JWST is equipped with high-resolution and high-sensitivity instruments.
Trigger¶
The trigger element should be defined in the :::tooltip[] label, inside the square brackets. In this example, the trigger is JWST as indicated by the dotted underline in the rendered text.
With block tooltips, your post text is scanned from the top, in search of all occurrences of the target text. Each occurrence of target text becomes a trigger for the tooltip window. Scanning stops at the point where the :::tooltip is defined. In this example, notice how both instances of JWST trigger the tooltip window.
occurrence property¶
If you don't want every instance of the target text to trigger the tooltip, you can use the occurrence property to select a specific instance. For example,
:::tooltip[JWST]{ occurrence=2 }
...
:::would make the 2nd instance of JWST trigger the tooltip window, but not the 1st.
Content¶
The tooltip content should be defined inside the :::tooltip container, between the opening and closing colons.