How to add tooltip to div in react

Question

Can you tell me how to add tooltip to div in react? Use code snippets if possible.

Answer 1

You can utilize React's state management to control the visibility of the tooltip. Here's a simple implementation:

1. Create a Tooltip Component:

Define a Tooltip component that displays the tooltip text when the isVisible state is true.

import React from 'react';

const Tooltip = ({ text, isVisible }) => {

  return (

    isVisible && (

      <div style={tooltipStyle}>

        {text}

      </div>

    )

  );

};


const tooltipStyle = {

  position: 'absolute',

  backgroundColor: 'black',

  color: 'white',

  padding: '5px',

  borderRadius: '3px',

  zIndex: 1000,

};

export default Tooltip;

2. Implement Tooltip in a Parent Component:

Use the Tooltip component within a parent component, managing its visibility based on mouse events.

import React, { useState } from 'react';

import Tooltip from './Tooltip';

const TooltipWrapper = () => {

  const [isTooltipVisible, setTooltipVisible] = useState(false);

  const handleMouseEnter = () => setTooltipVisible(true);

  const handleMouseLeave = () => setTooltipVisible(false);

  return (

    <div

      onMouseEnter={handleMouseEnter}

      onMouseLeave={handleMouseLeave}

      style={{ position: 'relative', display: 'inline-block' }}

    >

      Hover over me

      <Tooltip text="This is a tooltip" isVisible={isTooltipVisible} />

    </div>

  );

};

export default TooltipWrapper;

3. Usage:

Include the TooltipWrapper component in your application where you want the tooltip functionality.

import React from 'react';

import TooltipWrapper from './TooltipWrapper';


function App() {

  return (

    <div>

      <TooltipWrapper />

    </div>

  );

}

export default App;