How to create a custom tooltip for your next.js website

In this post, I am going to show you how to setup a custom tooltip in a next.js application in 5 simple steps. Each step shall have a code snippet beneath it that you can copy and edit as you wish.

Please note this tutorial assumes that you're aware on how to use stylesheets in next.js. If you are not then read our How to use external stylesheets in next.js post.

Alright lets begin

Step 1

Import useState hook from react by adding this to your code

import {useState} from 'react'

Step 2

Create a  state for tooltip and set its useState to copy as shown below, the word copy can be edited to whatever you want.

const [tooltip, setTooltip] = useState('copy');

Step 3

Create an external stylesheet and import it into your code as shown below

If you already have a stylesheet that you are using then just paste the code into the stylsheet

For a next.js website importation of stylesheet is done like this

import {styles} from './blog.module.css'

Step 4

In your stylesheet paste in the code snippet below.

This is for adding styles to our button and tooltip bubble

/* tooltip css */

.tooltip{
  position: relative; 
  display: flex;
  color: white;
}
/* make our tooltip show up only on button hover */
.tooltip_button:hover ~.tooltip_container{
  visibility: visible;
  
}
/* make the tooltip hidden */
.tooltip_container{
  position: absolute;
/* this is used to place the tooltip bubble above the button, edit to value that fits you*/
/* also you can change top to bottom, right or left for different tooltip location */
  top:-200%; 

  visibility: hidden;
}
/* top part of tooltip container */
.tooltip_text{
  background: #0070f3;
  border-radius: 3px;
  padding: 4px;
  display: flex;
  justify-content: center;
}
/* the button part of the tooltip container */
.tooltip_text_buttom{
  width: 0;
  height: 0;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 0.7em  solid #0070f3;
}

/* end of tooltip css */

 Step 5

In your JSX section paste in the code below;

The onClick event handles what happens when our button is clicked. In this case we want the state of our tooltip  to change to copied.

The onMouseLeave event handles what happens when the mouse pointer is moved out of an element. In this case our element is a button and we want the state of tooltip value to be set back to copy.

Adding "{tooltip}" ensures that the tooltip text we want to display is always the current value of tooltip state.

Please note, as you can see in the code below all our classes are precluded by styles , if you are using a diffrent stylesheet ensure to change styles to whatever name you asssigned to the stylesheet you imported.

<div className={`${styles.tooltip}`}>

   <button onMouseLeave={()=> setTooltip('copy')} onClick={()=>setTooltip('copied')} className= 
     {`${styles.tooltip_button}`}>Click me
   </button>
   <div className={`${styles.tooltip_container}`}>
      <div className={`${styles.tooltip_text}`}>{tooltip}</div>
       <div className={`${styles.tooltip_text_buttom}`}></div>
   </div>
</div>

Conclusion

We have managed to create a custom tooltip for our next.js website using only useState, jfx and css. As always thanks for reading. I will love to know your thoughts about the post so leave a comment down below.