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 --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>
)

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