Tooltip Glossary | Staticview

The anchors are inline buttons, so the terms stay focusable. The tooltips are linked by id, so they sit after the paragraph and keep the sentence readable as plain prose. The terms' only job is revealing their definition, so click joins the triggers, which is what reaches touch users. max-inline-size wraps each definition instead of stretching it into one long line.

A tooltip is attached to an and rendered in the through the API, so no parent can clip it.

The element the tooltip describes, points at, and follows

Code

The following example assumes that you have imported the component and set up the theme.

<p class="glossary-text">
7 collapsed lines
  A tooltip is attached to an
  <button type="button" aria-describedby="tooltip-anchor" data-sv-tooltip="tooltip-anchor">anchor element</button>
  and rendered in the
  <button type="button" aria-describedby="tooltip-top-layer" data-sv-tooltip="tooltip-top-layer">top layer</button>
  through the
  <button type="button" aria-describedby="tooltip-popover" data-sv-tooltip="tooltip-popover">popover</button>
  API, so no parent can clip it.
</p>

<sv-tooltip id="tooltip-anchor" trigger="hover focus click">The element the tooltip describes, points at, and follows</sv-tooltip>
<sv-tooltip id="tooltip-top-layer" trigger="hover focus click">
  A browser layer above the page that ignores stacking contexts
</sv-tooltip>
<sv-tooltip id="tooltip-popover" trigger="hover focus click">
  The platform API for content that shows above everything else
</sv-tooltip>

<style>
22 collapsed lines
  .glossary-text {
    max-inline-size: 34rem;
    padding-block: 2em;
    margin: auto;
    line-height: 1.7;

    button {
      display: inline;
      padding: 0;
      font: inherit;
      color: var(--sv-gray-1);
      cursor: help;
      background: none;
      border: none;
      border-block-end: 1px dotted var(--sv-gray-3);
    }
  }

  sv-tooltip {
    max-inline-size: 30ch;
    font-size: 0.875em;
  }
</style>