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
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>
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;
}
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)