Appearance

Tooltip ​

The Tooltip component is used to display a floating menu when an anchor element is hovered.

WARNING

The v-tooltip directive is still supported, but if you are using the v-tooltip directive please upgrade to the Tooltip component.

Basic Usage ​

The text prop may be used to set the text that will be displayed in the tooltip. This usage is for cases when no additional content or formatting is needed.

Tooltip anchor
vue
<Tooltip text="This is a tool tip to help the user learn about a feature.">
  Tooltip anchor
</Tooltip>

Playground ​

Tooltip anchor

Content Slot ​

The content slot may also be used to set the content that will be displayed within the tooltip. This usage is for cases when additional content or formatting is needed.

Tooltip anchor
vue
<Tooltip>
  Tooltip anchor
  <template #content>
    <span>This is a <span class="tw-font-bold">tool tip</span> to help the user learn about a feature.</span>
  </template>
</Tooltip>

Icon Slots ​

Primary Icon ​

The primaryIcon slot may be used to display an icon . This will be displayed before the content.

Tooltip anchor
vue
<Tooltip>
  Tooltip anchor
  <template #icon><Icon name="mj-leaf" /></template>
  <template #content>
    <span>This is a <span class="tw-font-bold">tool tip</span> to help the user learn about a feature.</span>
  </template>
</Tooltip>

Secondary Icon ​

Tooltip anchor
vue
<Tooltip>
  Tooltip anchor
  <template #content>
    <span>This is a <span class="tw-font-bold">tool tip</span> to help the user learn about a feature.</span>
  </template>
  <template #secondaryIcon><Icon name="mj-leaf" /></template>
</Tooltip>

Primary and Secondary Icon ​

Tooltip anchor
vue
<Tooltip>
  Tooltip anchor
  <template #icon><Icon name="mj-leaf" /></template>
  <template #content>
    <span>This is a <span class="tw-font-bold">tool tip</span> to help the user learn about a feature.</span>
  </template>
  <template #secondaryIcon><Icon name="mj-leaf" /></template>
</Tooltip>

API ​

See the documentation below for a complete reference to all the props and classes available.