react-simtip

A simple tooltip component for React.

Features

• ⚡️ Lightweight (less than 2.3kb gzipped).
• 📦 No dependencies.
• 📝 Written in TypeScript.

• 📖 Easy to use.
• 🎨 Highly customizable.
• 📚 Storybook.

Storybook

You can see the component in action in the Storybook.

Installation

npm install react-simtip

or

yarn add react-simtip

Usage

import React from "react";
import { Tooltip } from "react-simtip";

const App = () => {
	return (
		<Tooltip content="Hello World!">
			<button>Hover me!</button>
		</Tooltip>
	);
};

export default App;

Props

Required

Name	Type	Default	Description
content	string or ReactNode	null	The content of the tooltip.
children	ReactNode	null	The element that will trigger the tooltip.

Optional

Position

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

Appearance

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

Animation

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

Classes

Name	Type	Default	Description	Values
className	string	null	The class name of the tooltip.	Any valid CSS class name

Styling

There are three ways to style the tooltip:

1. Using the className prop

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

2. Using the provided CSS variables

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

3. Using provided props

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;

License

The MIT License. See LICENSE for more information.

Author

Manuel Martín