A simple tooltip component for React.
- ⚡️ Lightweight (less than 2.3kb gzipped).
- 📦 No dependencies.
- 📝 Written in TypeScript.
- 📖 Easy to use.
- 🎨 Highly customizable.
- 📚 Storybook.
You can see the component in action in the Storybook.
npm install react-simtip
or
yarn add react-simtip
import React from "react";
import { Tooltip } from "react-simtip";
const App = () => {
return (
<Tooltip content="Hello World!">
<button>Hover me!</button>
</Tooltip>
);
};
export default App;
Name | Type | Default | Description |
---|---|---|---|
content |
string or ReactNode |
null | The content of the tooltip. |
children |
ReactNode |
null | The element that will trigger the tooltip. |
Name | Type | Default | Description | Values |
---|---|---|---|---|
placement |
string |
"top" | The position of the tooltip. | "top", "bottom", "left", "right" |
trigger |
string |
"hover" | The event that will trigger the tooltip. | "hover", "click" |
showDelay |
number |
400 | The delay before the tooltip appears (in milliseconds). | Any number |
hideDelay |
number |
0 | The delay before the tooltip disappears (in milliseconds). | Any number |
distanceFromTarget |
number |
30 | The distance between the tooltip and the anchor (in pixels). | Any number |
Name | Type | Default | Description | Values |
---|---|---|---|---|
fontSize |
string |
"1rem" | The font size of the tooltip. | Any valid CSS font size |
padding |
number |
6 | The padding of the tooltip (in pixels). | Any number |
borderRadius |
number |
4 | The border radius of the tooltip (in pixels). | Any number |
backgroundColor |
string |
"#000" | The background color of the tooltip. | Any valid CSS color |
color |
string |
"#fff" | The text color of the tooltip. | Any valid CSS color |
hasArrow |
boolean |
false | Whether the tooltip has an arrow or not. | true, false |
arrowSize |
number |
6 | The size of the arrow (in pixels). | Any number |
Name | Type | Default | Description | Values |
---|---|---|---|---|
animation |
string |
"fade" | The animation of the tooltip. | "fade", "scale", "flip", "slide", "slide-flip", "bounce" |
animationDuration |
number |
300 | The duration of the animation (in milliseconds). | Any number |
Name | Type | Default | Description | Values |
---|---|---|---|---|
className |
string |
null | The class name of the tooltip. | Any valid CSS class name |
There are three ways to style the tooltip:
import React from "react";
import { Tooltip } from "react-simtip";
const App = () => {
return (
<Tooltip content="Hello World!" className="my-tooltip">
<button>Hover me!</button>
</Tooltip>
);
};
export default App;
.my-tooltip {
background-color: #000;
color: #fff;
font-size: 1rem;
padding: 6px;
border-radius: 4px;
}
You can override the default CSS variables by adding the following code to your CSS file (This is the easiest way to apply same styles to all the tooltips):
:root {
--simtip-padding: 6px;
--simtip-animation-duration: 300ms;
--simtip-border-radius: 4px;
--simtip-font-size: 11px;
}
This way styles will be applied only to the tooltip that has the prop.
import React from "react";
import { Tooltip } from "react-simtip";
const App = () => {
return (
<Tooltip
content="Hello World!"
backgroundColor="#000"
color="#fff"
fontSize="1rem"
padding={6}
borderRadius={4}
>
<button>Hover me!</button>
</Tooltip>
);
};
export default App;
The MIT License. See LICENSE for more information.
Manuel Martín |