Tooltips

Pure CSS tooltips — no JavaScript, no extra HTML. Just add tooltip="Your text" to any element. Position with tooltip-pos="bottom|left|right".

<button surface="solid" tone="primary" density="default" radius="md"
        tooltip="Saves your changes">
  Save
</button>
<span tooltip="Your unique account name">Username</span>

<button tooltip="Opens in a new tab" tooltip-pos="bottom">
  Open
</button>

<button tooltip="Previous page" tooltip-pos="left">←</button>
<button tooltip="Next page"     tooltip-pos="right">→</button>

Custom tokens

/* Override tooltip appearance */
:root {
  --aura-tooltip-bg:         #1a1a2e;    /* bubble background */
  --aura-tooltip-color:      #e2e2f0;    /* text color        */
  --aura-tooltip-radius:     6px;        /* corner radius     */
  --aura-tooltip-size:       0.78rem;    /* font size         */
  --aura-tooltip-gap:        8px;        /* distance from element */
  --aura-tooltip-max-width:  220px;      /* wraps long text   */
}