Components

Tooltip

Display contextual information when a user hovers over an element.

Usage

The Tooltip can be used to provide contextual information that appears when a user hovers over an element.

Each Tooltip instance is pre-configured with styles based on the default look and feel, but can be customized per-instance, or wrapped in a Snippet for easy reusability.

::tooltip
---
text: "This button has a tooltip!"
---
  ::button{ appearance="secondary" }
  Hover me
  ::
::

Props

text

The text to display in the Tooltip when hovered.

Alternatively, you can provide more complex tooltip content by utilizing the content slot.

  • Type: string
  • Default: ''
::tooltip
---
text: "This is the tooltip text."
---
  ::button{ appearance="secondary" }
  Hover me
  ::
::
Tooltip Component Props

The text to display in the tooltip.

placement

Where to position the tooltip in relation to the trigger element when activated.

  • Type: 'auto' | 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end'
  • Default: 'bottom'
::tooltip
---
text: "This is a tooltip!"
placement: "right"
---
  ::button{ appearance="secondary" }
  Hover me
  ::
::
Tooltip Component Props

Define where to display the tooltip popover. Defaults to `'bottom'`.

Shared Props

This component also includes the shared props listed below:

  • backgroundColor - default is #000933
  • border - default is none
  • borderRadius - default is 4px
  • color - default is #fff
  • display - default is 'inline-flex'
  • maxWidth - default is none
  • padding - default is 6px
  • styles - default is ''

See here for more information on shared props.

::tooltip
---
text: "This is a tooltip!"
display: "inline-flex"
background-color: "#000933"
border: "none"
border-radius: "4px"
color: "#fff"
padding: "6px"
---
  ::button{ appearance="secondary" }
  Hover me
  ::
::
Tooltip Component Props

The display type of the component. Accepts the CSS values for 'display'.

The background color of the component. Accepts string | null.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The text color of the element. Accepts string.

The padding of the component. Accepts string | null.

Slots

default

Use the #default slot provide the tooltip's trigger element. When hovering over the default slot content, the tooltip will be shown.

content

Provide more complex tooltip content, such as formatted markdown or other MDC syntax. When provided, the content slot takes precedence over the text prop.

::tooltip
  ::button{ appearance="secondary" }
  Hover me
  ::

#content
This **tooltip** has `formatted` markdown [with a link](/components/tooltip#content).
::