Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Tooltip

Plain CSS implementation of the Figma Tooltips section, node 828:2975.

Plain

Supporting text Supporting text Supporting text Supporting text

Multi-Line

Supporting text can wrap across multiple lines when the content needs more space. Supporting text can wrap across multiple lines when the content needs more space.

Contrast Themes

Supporting text Supporting text

Rich

Trigger Markup

Supporting text

Tooltip visibility, timing, collision handling, and portal strategy are owned by the consuming application.

CSS API

Use .sui-tooltip--bottom for the public API name even though Figma labels that position as below.

<button aria-describedby="tooltip-id">Trigger</button> <span class="sui-tooltip sui-tooltip--light sui-tooltip--top" id="tooltip-id" role="tooltip"> Supporting text </span> <div class="sui-tooltip sui-tooltip--rich" role="tooltip"> <p class="sui-tooltip__title">Title</p> <p class="sui-tooltip__body">Supporting line text</p> <div class="sui-tooltip__actions"> <button class="sui-tooltip__action" type="button">Action</button> </div> </div>