Tooltips

Inline hover/focus tooltips for defining terms, abbreviations, and providing contextual help. Tooltips are accessible via keyboard (Tab key) and display a popup above the term.

Basic Tooltip

Hover over the term to see the definition:

The Grav CMSGrav is a modern flat-file CMS built with PHP uses MarkdownMarkdown is a lightweight markup language for formatting text for content authoring.

The [doc-tooltip tip="Grav is a modern flat-file CMS built with PHP"]Grav CMS[/doc-tooltip]
uses [doc-tooltip tip="Markdown is a lightweight markup language for formatting text"]Markdown[/doc-tooltip]
for content authoring.

Styles

Three visual styles control how the trigger term appears:

Underline (default)

A dotted underline indicates the term has a tooltip:

CSSCascading Style Sheets is used for styling web pages.

Highlight

A tinted background highlights the term:

CSSCascading Style Sheets is used for styling web pages.

Plain

No visual indicator — the cursor changes to a help icon:

CSSCascading Style Sheets is used for styling web pages.

[doc-tooltip tip="Cascading Style Sheets" style="underline"]CSS[/doc-tooltip]
[doc-tooltip tip="Cascading Style Sheets" style="highlight"]CSS[/doc-tooltip]
[doc-tooltip tip="Cascading Style Sheets" style="plain"]CSS[/doc-tooltip]

Keyboard Accessible

Tooltips can be triggered by keyboard focus (Tab key). Try tabbing through this paragraph:

Press TabTab moves focus to the next interactive element to navigate, EnterEnter activates the focused element to activate, and EscapeEscape closes menus and dialogs to dismiss.

Glossary Example

A paragraph with multiple defined terms:

The CMSA system for organizing content into discrete web pages renders pages using TwigA template engine for PHP that separates logic from presentation templates. Content is written in MarkdownA text-to-HTML conversion tool that uses plain text formatting and stored as flat files, with configuration managed through YAMLYAML Ain't Markup Language — a human-readable data serialization format files.

The [doc-tooltip tip="A system for organizing content into discrete web pages"]CMS[/doc-tooltip]
renders pages using [doc-tooltip tip="A template engine for PHP" style="highlight"]Twig[/doc-tooltip]
templates. Content is written in [doc-tooltip tip="A text-to-HTML conversion tool"]Markdown[/doc-tooltip]
and stored as flat files, with configuration managed through
[doc-tooltip tip="YAML Ain't Markup Language"]YAML[/doc-tooltip] files.

Parameters

The content between ... is the visible term text.