Tooltip

The BTooltip is used to show a tooltip on hover or click. The component can be used on any element, but is most commonly used on links, buttons, and form controls.

Trigger

The trigger prop controls how the tooltip is triggered. The default trigger is hover. By setting the trigger prop to click, the tooltip will be triggered on click.

<template>
  <div class="flex flex-wrap justify-between gap-12">
    <BBtn>
      Triggered on hover
      <BTooltip>
        I'm triggered on hover
      </BTooltip>
    </BBtn>
    <BBtn>
      Triggered on click
      <BTooltip
        trigger="click"
      >
        You had to click me to see this
      </BTooltip>
    </BBtn>
  </div>
</template>

Delayed show / hide appearance

Sometimes you may want to delay the appearance of a the tooltip. so that it doesn't appear immediately when the user hovers over the element.

You can set the delay and hide-delay prop to change the delay of the tooltip. The default delay is 0 for both.

<template>
  <BBtn>
    With delay
    <BTooltip
      delay="1000"
      hide-delay="500"
    >
      I'm a delayed tooltip
    </BTooltip>
  </BBtn>
</template>

Placement

You can set the placement prop to change the position of the tooltip. The default placement is top.

<script setup lang="ts">
const placements = [
  'top',
  'top-start',
  'top-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'left',
  'left-start',
  'left-end',
  'right',
  'right-start',
  'right-end',
]
</script>

<template>
  <div class="grid justify-items-start sm:(grid-cols-2) gap-x-36 gap-y-16">
    <BBtn
      v-for="placement in placements"
      :key="placement"
    >
      {{ placement }}
      <BTooltip :placement="placement">
        My placement is "{{ placement }}"
      </BTooltip>
    </BBtn>
  </div>
</template>

Rich content

You can set the placement prop to change the position of the tooltip. The default placement is top.

<template>
  <div class="flex flex-wrap justify-between gap-12">
    <BBtn>
      Triggered on hover
      <BTooltip class="max-w-sm shadow-md !px-4 !py-2">
        This is a tooltip with rich content. It can contain any HTML.
        It can also contain any Vue component. For example, here is some chips and also a link
        <div class="flex flex-wrap gap-2 my-2">
          <BChip>Chip 1</BChip>
          <BChip>Chip 2</BChip>
          <BChip>Chip 3</BChip>
        </div>
        <div class="flex justify-end">
          <a
            class="text-green-500 hover:underline text-base"
            href="https://google.com"
          >Goggle it</a>
        </div>
      </BTooltip>
    </BBtn>
    <BIconBtn
      icon="i-mdi:help"
      variant="tonal"
    >
      <BTooltip
        class="max-w-sm shadow-md !px-4 !py-2"
        trigger="click"
      >
        This is a tooltip with rich content. It can contain any HTML.
        It can also contain any Vue component. For example, here is some chips and also a link
        <div class="flex flex-wrap gap-2 my-2">
          <BChip>Chip 1</BChip>
          <BChip>Chip 2</BChip>
          <BChip>Chip 3</BChip>
        </div>
        <div class="flex justify-end">
          <a
            class="text-green-500 hover:underline text-base"
            href="https://google.com"
          >Goggle it</a>
        </div>
      </BTooltip>
    </BIconBtn>
  </div>
</template>