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'
where "./blog.module.css" is the location of your stylesheet within the app and styles is the the name we want to assign to our stylesheet

Step 4

In your stylesheet paste in the code snippet below.

This is for adding styles to our button and tooltip bubble

/* tooltip css */

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

  visibility: hidden;
/* top part of tooltip container */
  background: #0070f3;
  border-radius: 3px;
  padding: 4px;
  display: flex;
  justify-content: center;
/* the button part of the tooltip container */
  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
   <div className={`${styles.tooltip_container}`}>
      <div className={`${styles.tooltip_text}`}>{tooltip}</div>
       <div className={`${styles.tooltip_text_buttom}`}></div>


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.



Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

message profile




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.