Create React Tooltip without External Library

Hello everyone, in this tutorial we are going to create 'Tooltip' component for React , but we will not use any external library, so that you get the flexibility to customise it according to your project need. So Let's start.

First Let's see have a look of the final outcome :

So we will start by initiating a project with create-react-app. And within src folder we will create a Tooltip.js file, Tooltip component will allow user to pass tooltip text.

import React from 'react'
import './style.css'
const Tooltip = ({text}) => {
    return(
        <div style={{
            textAlign:'center',
            margin:'10%'
        }}>
            <div class="custom-tooltip">Hover to see tooltip
                <span class="custom-tooltip-text">{text}</span>
            </div>
            <span style={{
                display:'block',
                marginTop:20,
                color:'blue'            
            }}>https://reactcodes.blogspot.com/</span>
        </div>
    )
}

export default Tooltip

I have created a style.css file which holds all the required styles for tooltip :

.custom-tooltip {
    position: relative;
    display: inline-block;
}
  
.custom-tooltip .custom-tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: gray;
    color: #fff;
    text-align: center;
    border-radius: 1px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.7s;
}

.custom-tooltip .custom-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: gray transparent transparent transparent;
}

.custom-tooltip:hover .custom-tooltip-text {
    visibility: visible;
    opacity: 1;
}

Finally use Tooltip component in App component :

import React from 'react';
import Tooltip from './Tooltip'

const App = () => {
  return (
    <>
      <Tooltip text="Tooltip text content" />
    </>
  );
}
export default App;

Here is the result :

Thanks for your time, hope this helps :)