Tooltip

Display a portalled tooltip.

Usage

Utilise a default tooltip with the information icon.

      <template>
  <CTooltip
    content="Tooltip content"
    :float="{ side: 'left' }"
  />
</template>

Trigger text

The default slot requires a root element. This means to use just text, you must wrap in span or a similar element. Alternatively, use triggerText prop to pass a string.

      <template>
  <CTooltip content="Example tooltip" trigger-text="Hover me!" />
</template>

Disabled

Use the disabled boolean prop to prevent tooltip activation.

      <template>
  <CTooltip disabled content="Example tooltip" trigger-text="Hover me!" />
</template>

Float

Use the float prop to customise the props passed to TooltipContent.

      <template>
  <CTooltip :float="{
  placement: 'right',
  sideOffset: 10
}" content="Example tooltip" trigger-text="Hover me!" />
</template>

Props

Prop Default Type
defaultOpenboolean
The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
openboolean
The controlled open state of the tooltip.
delayDuration100 number
Override the duration given to the Provider to customise the open delay for a specific tooltip.
disableHoverableContentboolean
Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
disableClosingTriggerfalseboolean
When true, clicking on trigger will not close the content.
disabledfalseboolean
When true, disable tooltip
ignoreNonKeyboardFocusfalseboolean
Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the :focus-visible selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
content string
float TooltipContentProps
triggerText string
arrowtrueboolean
portaltrue string | false | true | HTMLElement
size'md' "md" | "sm"