Logo

Tooltip

A tooltip component that displays text when hovering over trigger content.

Using Tooltip

You rarely need to use the Tooltip component directly, as visual components support three properties, tootip, tooltipMarkdown, and tooltipOptions respectively. When you utilize the tooltip property with a visual component, hovering over that component displays the associated text.

The tooltip property 

<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="I'm a hovered!"
    >
    </Button>
  </CHStack>
</App>
Example: using the tooltip property
<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="I'm a hovered!"
    >
    </Button>
  </CHStack>
</App>

The tooltipMarkdown property

The tooltipMarkdown property allows you to use the tooltip with markdown syntax.
<App>
  <VStack height="80px" width="fit-content">
    <Card
      title="Tooltip with markdown"
      tooltipMarkdown="This *example* uses `toolTipMarkdown`"
      tooltipOptions="right"
    />
  </VStack>
</App>
Example: using the tooltipMarkdown property
<App>
  <VStack height="80px" width="fit-content">
    <Card
      title="Tooltip with markdown"
      tooltipMarkdown="This *example* uses `toolTipMarkdown`"
      tooltipOptions="right"
    />
  </VStack>
</App>

The tooltipOptions property

The tooltip provides several options (see the properties of this component), influencing its behavior and appearance. You can set the tooltipOptions property to define these options.
For example, the following example positions the tooltip to the right, making it appear somewhat distant from the component.
<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="I'm hovered"
      tooltipOptions="right; sideOffset: 32"
    >
    </Button>
  </CHStack>
</App>
Example: using the tooltipOptions property
<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="I'm hovered"
      tooltipOptions="right; sideOffset: 32"
    >
    </Button>
  </CHStack>
</App>
You can define tooltipOptions as a string or as an object. In the latter case, the object declares name and value pairs describing the visual options:
<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="My options use an object"
      tooltipOptions="{{ showArrow: false, side: 'bottom', align: 'start' }}"
    >
    </Button>
  </CHStack>
</App>
Example: tooltipOptions as an object
<App>
  <CHStack height="100px" verticalAlignment="center" >
    <Button
      label="Hover the mouse over me!"
      tooltip="My options use an object"
      tooltipOptions="{{ showArrow: false, side: 'bottom', align: 'start' }}"
    >
    </Button>
  </CHStack>
</App>
The string form of tooltipOptions is composed of names or name and value pairs separated by semicolons. The properties that allow enumerations (such as side or align) can be set with a name representing a single value. Properties with boolean values can use the property name to represent the true value, or the property name prefixed with an exclamation mark to signify a false value. Numeric values are separated from the property name by a colon, and they do not use units. Here are a few examples:
<App>
  <VStack height="100px" horizontalAlignment="center" gap="3rem">
    <Card
      title="Tooltip to the left with 800ms delay"
      tooltip="I'm a Tooltip"
      tooltipOptions="left; delayDuration: 800; !showArrow" />
    <HStack>
      <Icon
        name="email"
        width="48px"
        height="48px"
        tooltipMarkdown="**Tooltip** to the bottom with no arrows, aligned left"
        tooltipOptions="bottom; !showArrow; start" />
      <Icon
        name="phone"
        width="48px"
        height="48px"
        tooltipMarkdown="*Tooltip* to the bottom with arrows, 28 pixels away"
        tooltipOptions="bottom; showArrow; sideOffset: 28" />
    </HStack>
  </VStack>
</App>
Example: tooltipOptions as a string
<App>
  <VStack height="100px" horizontalAlignment="center" gap="3rem">
    <Card
      title="Tooltip to the left with 800ms delay"
      tooltip="I'm a Tooltip"
      tooltipOptions="left; delayDuration: 800; !showArrow" />
    <HStack>
      <Icon
        name="email"
        width="48px"
        height="48px"
        tooltipMarkdown="**Tooltip** to the bottom with no arrows, aligned left"
        tooltipOptions="bottom; !showArrow; start" />
      <Icon
        name="phone"
        width="48px"
        height="48px"
        tooltipMarkdown="*Tooltip* to the bottom with arrows, 28 pixels away"
        tooltipOptions="bottom; showArrow; sideOffset: 28" />
    </HStack>
  </VStack>
</App>

Using the Tooltip component

Instead of using the tooltip-related properties, you can wrap the component into a Tooltip:
<App>
  <VStack height="100px" horizontalAlignment="center">
    <Tooltip side="bottom" markdown="This *example* uses a `Tooltip` component">
      <Card title="Card 1: within a Tooltip" />
      <Card title="Card 2: within the same Tooltip" />
    </Tooltip>
  </VStack>
</App>
Example: Using the Tooltip component
<App>
  <VStack height="100px" horizontalAlignment="center">
    <Tooltip side="bottom" markdown="This *example* uses a `Tooltip` component">
      <Card title="Card 1: within a Tooltip" />
      <Card title="Card 2: within the same Tooltip" />
    </Tooltip>
  </VStack>
</App>

Using a Tooltip template

You can specify tooltips that you could not otherwise do with the text or markdown properties.
<App>
  <VStack height="100px" horizontalAlignment="center">
    <Tooltip side="bottom">
      <property name="tooltipTemplate">
        <HStack>
          <Stack width="24px" height="24px" backgroundColor="purple" />
          <H2>This is a tooltip</H2>
        </HStack>
      </property>
      <Card title="I have a templated Tooltip!" />
    </Tooltip>
  </VStack>
</App>
Example: Using a tooltipTemplate
<App>
  <VStack height="100px" horizontalAlignment="center">
    <Tooltip side="bottom">
      <property name="tooltipTemplate">
        <HStack>
          <Stack width="24px" height="24px" backgroundColor="purple" />
          <H2>This is a tooltip</H2>
        </HStack>
      </property>
      <Card title="I have a templated Tooltip!" />
    </Tooltip>
  </VStack>
</App>

Properties

align (default: "center")

The preferred alignment against the trigger
Available values: start, center (default), end

alignOffset (default: 0)

An offset in pixels from the 'start' or 'end' alignment options

avoidCollisions (default: true)

When true, overrides the side and align preferences to prevent collisions with boundary edges

defaultOpen (default: false)

The open state of the tooltip when it is initially rendered

delayDuration (default: 700)

The duration from when the mouse enters a tooltip trigger until the tooltip opens (in ms)

markdown

The markdown content to display in the tooltip

showArrow (default: false)

Whether to show the arrow pointing to the trigger element

side (default: "top")

The preferred side of the trigger to render against when open
Available values: top (default), right, bottom, left

sideOffset (default: 4)

The distance in pixels from the trigger

skipDelayDuration (default: 300)

How much time a user has to enter another trigger without incurring a delay again (in ms)

text

The text content to display in the tooltip

tooltipTemplate

The template for the tooltip content

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

VariableDefault Value (Light)Default Value (Dark)
animation-Tooltipcubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.16, 1, 0.3, 1)
animationDuration-Tooltip400ms400ms
backgroundColor-Tooltip$color-surface-0$color-surface-200
border-Tooltipnonenone
borderBottom-Tooltipnonenone
borderBottomColor-Tooltipnonenone
borderBottomStyle-Tooltipnonenone
borderBottomWidth-Tooltipnonenone
borderColor-Tooltipnonenone
borderEndEndRadius-Tooltipnonenone
borderEndStartRadius-Tooltipnonenone
borderHorizontal-Tooltipnonenone
borderHorizontalColor-Tooltipnonenone
borderHorizontalStyle-Tooltipnonenone
borderHorizontalWidth-Tooltipnonenone
borderLeft-Tooltipnonenone
color-Tooltipnonenone
borderLeftStyle-Tooltipnonenone
borderLeftWidth-Tooltipnonenone
borderRadius-Tooltip4px4px
borderRight-Tooltipnonenone
color-Tooltipnonenone
borderRightStyle-Tooltipnonenone
borderRightWidth-Tooltipnonenone
borderStartEndRadius-Tooltipnonenone
borderStartStartRadius-Tooltipnonenone
borderStyle-Tooltipnonenone
borderTop-Tooltipnonenone
borderTopColor-Tooltipnonenone
borderTopStyle-Tooltipnonenone
borderTopWidth-Tooltipnonenone
borderHorizontal-Tooltipnonenone
borderVerticalColor-Tooltipnonenone
borderVerticalStyle-Tooltipnonenone
borderVerticalWidth-Tooltipnonenone
borderWidth-Tooltipnonenone
boxShadow-Tooltiphsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15pxhsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px
fill-arrow-Tooltip$color-surface-200$color-surface-200
fontSize-Tooltip15px15px
lineHeight-Tooltip11
padding-Tooltipnonenone
paddingBottom-Tooltip10px10px
paddingHorizontal-Tooltipnonenone
paddingLeft-Tooltip15px15px
paddingRight-Tooltip15px15px
paddingTop-Tooltip10px10px
paddingVertical-Tooltipnonenone
stroke-arrow-Tooltip$color-surface-200$color-surface-200
strokeWidth-arrow-Tooltip00
textColor-Tooltip$textcolor-primary$textcolor-primary
This site is an XMLUI™ app.