Flowbite Vue 3

Appearance

Vue Tooltip - Flowbite ​

Demo ​

vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <Tooltip>
    <template #trigger>
      <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      >
          Default Tooltip
      </button>
    </template>
    <template #content>
      Tooltip content
    </template>
  </Tooltip>
</template>
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <Tooltip>
    <template #trigger>
      <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      >
          Default Tooltip
      </button>
    </template>
    <template #content>
      Tooltip content
    </template>
  </Tooltip>
</template>

Tooltip styles ​

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the tooltip-light or tooltip-dark attribute.

vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- light style tooltip -->
    <Tooltip theme="light">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Light Tooltip
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
    <!-- dark style tooltip -->
    <Tooltip theme="dark">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Dark Tooltip
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
  </div>
</template>
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- light style tooltip -->
    <Tooltip theme="light">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Light Tooltip
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
    <!-- dark style tooltip -->
    <Tooltip theme="dark">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Dark Tooltip
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
  </div>
</template>

Placement ​

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with top, top-start , top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end, auto, auto-start, auto-end. The default value is: top

vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- Show tooltip on top -->
    <Tooltip placement="top">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip top
        </button>
      </template>
      <template #content>
        Tooltip on top
      </template>
    </Tooltip>
    <!-- Show tooltip on right -->
    <Tooltip placement="right">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip right
        </button>
      </template>
      <template #content>
        Tooltip on right
      </template>
    </Tooltip>
    <!-- Show tooltip on bottom -->
    <Tooltip placement="bottom">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip bottom
        </button>
      </template>
      <template #content>
        Tooltip on bottom
      </template>
    </Tooltip>
    <!-- Show tooltip on left -->
    <Tooltip placement="left">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip left
        </button>
      </template>
      <template #content>
        Tooltip on left
      </template>
    </Tooltip>
  </div>
</template>
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- Show tooltip on top -->
    <Tooltip placement="top">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip top
        </button>
      </template>
      <template #content>
        Tooltip on top
      </template>
    </Tooltip>
    <!-- Show tooltip on right -->
    <Tooltip placement="right">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip right
        </button>
      </template>
      <template #content>
        Tooltip on right
      </template>
    </Tooltip>
    <!-- Show tooltip on bottom -->
    <Tooltip placement="bottom">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip bottom
        </button>
      </template>
      <template #content>
        Tooltip on bottom
      </template>
    </Tooltip>
    <!-- Show tooltip on left -->
    <Tooltip placement="left">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip left
        </button>
      </template>
      <template #content>
        Tooltip on left
      </template>
    </Tooltip>
  </div>
</template>

triggerType ​

You can choose the triggering event by using the hover or click attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to click.

vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- Show tooltip on hover -->
    <Tooltip trigger="hover">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip hover
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
    <!-- Show tooltip on click -->
    <Tooltip trigger="click">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip click
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
  </div>
</template>
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>

<template>
  <div class="flex flex-wrap justify-center py-8 space-x-3">
    <!-- Show tooltip on hover -->
    <Tooltip trigger="hover">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip hover
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
    <!-- Show tooltip on click -->
    <Tooltip trigger="click">
      <template #trigger>
        <button
          type="button"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Tooltip click
        </button>
      </template>
      <template #content>
        Tooltip content
      </template>
    </Tooltip>
  </div>
</template>

Released under the MIT License.

Copyright © 2023 Flowbite™