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
Getting started
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="https://readymadecode.com">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;
}
Recommendation
How to create charts in ReactJS
Create Drag and Drop List in React
MultiSelect Components in React
For more React Tutorials Click here, Node.js Tutorials Click here.
If you like this, share this.
Follow us on Facebook, Twitter, Tumblr, LinkedIn, YouTube.
Comments are closed.