How to add a tooltip in VueJS?
February 24, 2023Hi 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 👍.