How to Create Tooltip UI Component using Vue 3 Flowbite

Last Updated on by in Vue JS

In this tutorial, we will learn how to create Tooltip in Vue js application using the Flowbite UI and Tailwind CSS.

A tooltip is a GUI element that allows to show extra or additional information regarding a particular data especially when the user hovers or clicks on a data item.

In web development, Tooltips are profoundly used in web applications, websites, and other digital interfaces to offer brief explanations, clarifications, or contextual details about icons, buttons, links, or other interactive elements that lacks the space to show the full information.

We will use Flowbite library, use it’s Tooltip API at the same time show you how to implement tooltip in Vue.

Tooltip solves space problem, and enhances the user experience by providing quick access to additional information without the need for the user to go to an other page or screen.

  • Step 1: Install Vue App
  • Step 2: Install Flowbite Library
  • Step 3: Add Tailwind CSS
  • Step 4: Create Reusable Component
  • Step 5: Create Tooltip Component
  • Step 6: Update App Component
  • Step 7: Start Development Server

Install Vue App

Node.js is a popular JavaScript runtime environment that helps to execute JavaScript code on the server side.

Here’s is the site from where you can install Node.

After the Node installation and setup is done, open a terminal and simply run the given command to install new Vue app.

npm install -g @vue/cli

We are now fully ready to install a new Vue application, you can execute given command to get started with Vue.

vue create vue-demo-app

Ensure that you select Vue 3 from the given options.

Head over to the project folder.

cd vue-demo-app

Install Flowbite Library

You can use Flowbite library, therefore type the given command on the command prompt and hit enter.

 npm install flowbite flowbite-vue --legacy-peer-deps

Add Tailwind CSS

Tailwind CSS is a great utility-first CSS framework that allows front-end developers to build modern user interfaces.

In the next step, we will add the Tailwind CSS and Script inside the public/index.html file.

<!doctype html>
<html>
<head>
  ...
  ...

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
   
</body>
</html>

Create Reusable Component

We need a component where we can write our JavaScript logic related to Tooltip UI element. This way we can quite easily manage user interfaces functionalities.

You now need to create a components/TooltipComp.vue file.

<template>
    <div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Create Tooltip Component

Flowbite offers Tooltip prop to define the Tooltip in vue, you can add light, dark theme to tooltip using theme prop, you can change the tooltip placement using the placement prop, top, right, bottom and to left.

Add code in the components/TooltipComp.vue file:

<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>

Update App Component

We will now open the App.vue file; in order to show the tooltip component using vue make sure to import and define the component in this file.

<template>
  <div class="mx-auto max-w-2xl lg:max-w-5xl">
    <h2 class="text-2xl font-bold tracking-tight sm:text-3xl mb-6 mt-6">
      Vue Tailwind Tooltip Component Example
    </h2>
    <TooltipComp />
  </div>
</template>

<script>
import TooltipComp from "./components/TooltipComp.vue";

export default {
  components: {
    TooltipComp,
  },
};
</script>

Start Development Server

The development task is done, the final task is to invoke the development server using the suggested command:

npm run serve

You can view the app using the given URL.

http://localhost:8080

How to Create Tooltip UI Component using Vue

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.