tooltip

A lightweight and simple tooltip component for React

Mar 09, 2019
A lightweight and simple tooltip component for React

react-simple-tooltip

A lightweight and simple tooltip component for React.

View Demo Download Source

Getting started

react-simple-tooltip

You can download react-simple-tooltip from the NPM registry via the npm or yarn commands

yarn add react-simple-tooltip npm install react-simple-tooltip --save

If you don't use package manager and you want to include react-simple-tooltip directly in your html, you could get it from the UNPKG CDN

https://unpkg.com/react-simple-tooltip/dist/react-simple-tooltip.min.js.

Usage

Attached to a Component

import React from "react" import Tooltip from "react-simple-tooltip" const App = () => ( <Tooltip content="????"> <button>Hover me !</button> </Tooltip> )

Standalone

import React from "react" import Tooltip from "react-simple-tooltip" const App = () => ( <div style={{position: "relative"}}> <Tooltip style={{position: "absolute", top: "50%", right: "0"}} content="????" /> </div> )

Custom css

import React from "react" import Tooltip from "react-simple-tooltip" import {css} from "styled-components" const App = () => ( <Tooltip content="????" customCss={css` white-space: nowrap; `} > <button>Hover me !</button> </Tooltip> )

Props

NamePropTypeDescriptionDefault
arrowPropTypes.numberArrow size, in pixels8
backgroundPropTypes.stringTooltip background color"#000"
borderPropTypes.stringTooltip border color"#000"
colorPropTypes.stringTooltip text color"#fff"
contentPropTypes.any.isRequiredTooltip content-
customCssPropTypes.anyCustom css-
fadeDurationPropTypes.numberFade duration, in milliseconds0
fadeEasingPropTypes.stringFade easing"linear"
fixedPropTypes.boolTooltip behavior, hover by defaultfalse
fontFamilyPropTypes.boolTooltip text font-family"inherit"
fontSizePropTypes.boolTooltip text font-size"inherit"
paddingPropTypes.numberTooltip padding, in pixels16
placementPropTypes.oneOf(["left", "top", "right", "bottom"])Tooltip placement"top"
radiusPropTypes.numberTooltip border radius0
zIndexPropTypes.numberTooltip z-index1

GitHub

Recommended