DEV Community

Cover image for Create Tooltip in React
Chetan Rohilla
Chetan Rohilla

Posted on • Updated on • Originally published at w3courses.org

Create Tooltip in React

A tooltip is mostly used to define the extra information about data(text,image or videos). Tooltip shows when the user moves the mouse pointer or tap over an element. Tooltip can be placed Top, Right, Bottom, Left. Here we will create tooltip in react applications by using the package React tooltip-lite. It is a A lightweight and responsive tooltip package, you can read in detail here.

Create Tooltip in React

Install with NPM

npm install react-tooltip-lite
Enter fullscreen mode Exit fullscreen mode

Import into your react Component

Now, we can use <Tooltip /> Component by importing it in our class or functional component.

import Tooltip from 'react-tooltip-lite';

<Tooltip 
content="React Tooltip" 
direction="right"
tagName="span"
className="target"
>
    <a href="http://w3courses.org">Visit Tutorials</a>
</Tooltip>
Enter fullscreen mode Exit fullscreen mode

There are many props available for this react tooltip component, you can see here.

Style React Tooltip in React

You can apply some css to react tooltip. Here below is an example.

.react-tooltip-lite {
  background: #000000;
  color: white;
}

.react-tooltip-lite-arrow {
  border-color: #333;
}
Enter fullscreen mode Exit fullscreen mode

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)

Top comments (0)