DocPensieve
Tooltip
The bubble is a real element that CSS reveals. It therefore appears on hover
and on keyboard focus, and it is linked to the term through
aria-describedby: a screen reader announces it instead of ignoring it.
On hover, from the keyboard
Hover the term with the mouse, or reach it with the Tab key.
The buildTurning the sources into HTML pages ready to serve. produces a complete folder, and the versionAll the pages of one version of the documentation. is its root.
The <Tooltip text="Turning the sources…">build</Tooltip> produces a folder.The four sides
Hover each one: topAbove, bottomBelow, leftOn the left and rightOn the right.
<Tooltip text="On the right" placement="right">
term
</Tooltip>The side is chosen according to the available space: top by default,
bottom when the term is at the top of the page, left or right in a narrow
column.
On a technical term
Useful to explain an identifier without weighing down the sentence.
The baseUrlDeployment prefix, derived from the sub-path of siteUrl when it is not written. field prefixes every internal link, and currentVersion served by default. At most one. designates the one the root serves.
The <Tooltip text="Deployment prefix."><code>baseUrl</code></Tooltip> field prefixes the links.In a table
| Field | Role |
|---|---|
slug | IdentifierIt shows up in /versions/<slug>/ and gives the branch its name. |
current | Version served by defaultThe site root redirects to it. |
prerelease | Version in preparationBanner on every page, and noindex in the head. |
In a card
A card does not clip what sticks out: the bubble comes out of it.
A termThe bubble comes out of the card, it is not cut. in a card.
And
anotherOpened downwards.below.
A long text
The bubble is capped at about sixteen rem wide, then wraps.
See the reason for version branchesA published version stays in the state in which it was produced. Rebuilding it is never necessary, and nothing would guarantee it gives the same result years later. for the details.
What it cannot do
The bubble is positioned absolutely: inside a container that clips its
overflow — an overflow: hidden — it will be cut. That is the limit of a
tooltip without JavaScript, and it is accepted: placing the bubble outside the
flow would take a script on every page.
The shipped components avoid that clipping wherever they can — a Card rounds
the corners of its image one by one rather than clipping its content.
The bubble does not close with the Escape key: listening for it would take a script, and content pages load none. It disappears when the pointer or the focus leaves the term.
A Tooltip without text stops the build: a hover with no effect goes
unnoticed for a long time. So does an unknown side.