There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time. For that reason, we are going to build a custom single file tooltip component that you can build yourself and tweak to your heart’s content. It might take 15 minutes instead of 3… sorry about that.
As it happens, this is also the boilerplate for the tooltip component we use on Qvault’s coding app.
We are building a single file component, as such it will be a single file with the following structure:
<template>
</template>
<script>
</script>
<style scoped>
</style>
At the end of this walkthrough we will have a tooltip component that floats above the target element(s), fades in and out, activates on hover, and is reusable across our entire app. Let’s take each section at a time.
<template>
<div class="tooltip-box">
<slot />
<div
class="tooltip"
>
<span
class="text"
>{{ text }}</span>
</div>
</div>
</template>
Fairly simple setup here. We need:
tooltip-box
to encapsulate the entire component and ensure positioning. span
that will house the text of our tooltip.#engineering practices #javascript #languages #vue #frontend #javascript #vue #vue.js