react-simple-tooltip
A lightweight and simple tooltip component for React
Getting started
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 --saveIf 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> )Demo
See Demo page
Props
| Name | PropType | Description | Default |
|---|---|---|---|
| arrow | PropTypes.number | Arrow size, in pixels | 8 |
| background | PropTypes.string | Tooltip background color | "#000" |
| border | PropTypes.string | Tooltip border color | "#000" |
| color | PropTypes.string | Tooltip text color | "#fff" |
| content | PropTypes.any.isRequired | Tooltip content | - |
| customCss | PropTypes.any | Custom css | - |
| fadeDuration | PropTypes.number | Fade duration, in milliseconds | 0 |
| fadeEasing | PropTypes.string | Fade easing | "linear" |
| fixed | PropTypes.bool | Tooltip behavior, hover by default | false |
| fontFamily | PropTypes.bool | Tooltip text font-family | "inherit" |
| fontSize | PropTypes.bool | Tooltip text font-size | "inherit" |
| padding | PropTypes.number | Tooltip padding, in pixels | 16 |
| placement | PropTypes.oneOf(["left", "top", "right", "bottom"]) | Tooltip placement | "top" |
| radius | PropTypes.number | Tooltip border radius | 0 |
| zIndex | PropTypes.number | Tooltip z-index | 1 |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
npm test).
See CONTRIBUTING.md guidelines
Changelog
See CHANGELOG.md
License
This project is licensed under the MIT License - see the LICENCE.md file for details
