Tooltip

Tooltips display brief explanatory text on hover, helping users understand UI element functionality.

Basic Usage

Hover over the trigger element to show the tooltip. Default placement is top.

<TTooltip text="This is a tooltip">
  <button class="btn">Hover me</button>
</TTooltip>

Four Directions

Four placement options: top (default), right, bottom, and left.

Show Code

<TTooltip placement="left" text="Left tooltip">
  <button class="btn">Left</button>
</TTooltip>
<TTooltip placement="top" text="Top tooltip">
  <button class="btn">Top</button>
</TTooltip>
<TTooltip placement="bottom" text="Bottom tooltip">
  <button class="btn">Bottom</button>
</TTooltip>
<TTooltip placement="right" text="Right tooltip">
  <button class="btn">Right</button>
</TTooltip>

Icon Elements

The default slot accepts any element — works great with icons.

Show Code

<script setup>
import { IconInfoCircle } from '@tabler/icons-vue'
</script>

<template>
  <TTooltip text="Useful information here">
    <span class="d-inline-flex align-items-center gap-1 text-secondary">
      <IconInfoCircle size="20" />
      Hover for info
    </span>
  </TTooltip>
</template>

Disabled State

Set the disabled prop to disable the tooltip interaction.

<TTooltip disabled text="Disabled tooltip">
  <button class="btn btn-secondary">Disabled</button>
</TTooltip>

Long Text

Tooltip has a max-width of 200px by default. Text wraps automatically.

<TTooltip text="This is a longer tooltip text that demonstrates automatic text wrapping and the max-width limit.">
  <button class="btn btn-outline-warning">Hover for long text</button>
</TTooltip>

API

Props

Prop	Type	Default	Description
text	string	''	Tooltip text content
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Tooltip placement direction
disabled	boolean	false	Whether to disable the tooltip
showDelay	number	100	Delay before showing on hover (ms)
hideDelay	number	150	Delay before hiding on mouse leave (ms)

Slots

Slot	Description
default	Trigger element (button, icon, text, etc.)

Emits

Event	Payload	Description
open	—	Emitted when tooltip opens
close	—	Emitted when tooltip closes