JSPM – react-simple-tooltip@2.6.3

Package Exports

react-simple-tooltip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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