Tooltips. Hover-first, focus-safe.
A single .lsd-tooltip wraps a trigger and reveals a small label on hover or focus. Placement, tone, and richness via independent modifiers.
.lsd-tooltip
Wrap any trigger with .lsd-tooltip + a .lsd-tooltip__bubble child. CSS handles hover and focus-within; JS upgrades click-trigger and touch support.
sm / md / lg
Size mods scale padding + font.
<span class="lsd-tooltip lsd-tooltip--top"> <button>Hover</button> <span class="lsd-tooltip__bubble">Hi</span> </span>
dark / light / accent / danger
Tone swap is bubble-only — trigger stays untouched.
<span class="lsd-tooltip lsd-tooltip--top
lsd-tooltip--accent">...
hover · focus · click
Tab into the buttons — focus-within triggers the bubble too. data-trigger="click" upgrades the third one to click-to-open.
<span class="lsd-tooltip lsd-tooltip--top"
data-trigger="click">...
Six placement + style variants
Four cardinal placements, an arrow caret, and a rich (multi-line) layout. Combine freely.
Top placement
Default — bubble sits above the trigger.
.lsd-tooltip--top
Bottom placement
For toolbars where there's no headroom.
.lsd-tooltip--bottom
Left placement
Side rail labels.
.lsd-tooltip--left
Right placement
Form-field helper.
.lsd-tooltip--right
Arrow caret
Adds a triangular pointer at the trigger edge.
.lsd-tooltip--with-arrow
Rich (title + body)
Multi-line layout for explanation-quality hints.
.lsd-tooltip--rich
Entrance chaining
Tooltips ship with a default fade+slide. Chain .lsd-fx--scale-in or .lsd-fx--slide-up on the bubble for richer entrances.
Scale-in entrance
Bubble springs from center.
<span class="lsd-tooltip__bubble
lsd-fx--scale-in">Slide-up entrance
Climbs into place from below.
<span class="lsd-tooltip__bubble
lsd-fx--slide-up">Fade-only
Quiet variant — no translate.
<span class="lsd-tooltip__bubble
lsd-fx--fade-in">