How to add a tooltip in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To add the tooltip in VueJs.we are going to add a tooltip using HTML and some CSS styling.

Today I am going to show you How to add a tooltip in VueJS?

Table of contains

• Setup the Vue.js
• Add a tooltip using HTML & CSS

Let’s start today’s tutorial How do I add a tooltip in VueJS?

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.

How to Install the VueJS project?

Add tooltip using HTML & CSS

Tooltips are the text which appears when the user moves the mouse over the element. To add the tooltip we are going to use the HTML container div element with class tooltip.When the user moves the mouse over this div element. It will show you the tooltip text.

And for the tooltip text, we are going to add the inline span element with the class tooltip text.

After the add the HTML. We are going to use some CSS styling. Let’s check the example ok the code:

FirstComponent.vue

<template>
  <div>
    <h1>Welcome to sortoutcode.com</h1>
    <div class="tooltip">
      sortoutcode
      <span class="tooltiptext">https://sortoutcode.com/</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "FirstComponent",
};
</script>
<style scoped>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

For now, let’s check the output.

All the best 👍.