React-simtip NPM

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

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;