tooltip

A small tooltip component for React which is developed with simplicity

May 21, 2018
A small tooltip component for React which is developed with simplicity

React-hint

React-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno.

View demo Download Source

(adsbygoogle = window.adsbygoogle []).push({});

react-hint tooltip
custom tooltip

How to install

npm i -S react-hint

How to use

// React import React from 'react' import ReactHintFactory from 'react-hint' const ReactHint = ReactHintFactory(React) // Preact import {h, Component} from 'preact' import ReactHintFactory from 'react-hint' const ReactHint = ReactHintFactory({createElement: h, Component}) // Inferno import Inferno from 'inferno-compat' import ReactHintFactory from 'react-hint' const ReactHint = ReactHintFactory(Inferno) // UMD const ReactHint = window.ReactHintFactory(window.React)

Options

ReactHint PropertyTypeDefault ValueDescription
attributeString"data-rh"Allows setting a custom tooltip attribute instead of the default one.
autoPositionBooleanfalseAutopositions tooltips based on closeness to window borders.
classNameString"react-hint"You can override the tooltip style by passing the className property.
delayNumber0The default delay before showing/hiding the tooltip.
eventsBoolean or {click: Boolean, focus: Boolean, hover: Boolean}falseEnables/disables all events or a subset of events.
onRenderContentFunctionPassing a function which returns a react node allows rendering custom content with attached event handlers.
persistBooleanfalseHide the tooltip only on outside click, hover, etc.
position"top", "left", "right", "bottom""top"Allows setting the default tooltip placement.
refFunctionYou can pass a function which will get a reference to the tooltip instance.
DOM Element AttributeTypeDefault ValueDescription
data-rhStringSets the tooltip's content.
data-rh-at"top", "left", "right", "bottom""top"Allows overriding the default tooltip placement.

Example

You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.

import React from 'react' import {render} from 'react-dom' import ReactHintFactory from 'react-hint' import 'react-hint/css/index.css' const ReactHint = ReactHintFactory(React) class App extends React.Component { onRenderContent = (target, content) => { const {catId} = target.dataset const width = 240 const url = `https://images.pexels.com/photos/${catId}/pexels-photo-${catId}.jpeg?w=${width}` return <div className="custom-hint__content"> <img src={url} width={width} /> <button ref={(ref) => ref && ref.focus()} onClick={() => this.instance.toggleHint()}>Ok</button> </div> } render() { return <div> <ReactHint autoPosition events delay={100} /> <ReactHint persist attribute="data-custom" className="custom-hint" events={{click: true}} onRenderContent={this.onRenderContent} ref={(ref) => this.instance = ref} /> <button data-rh="Default">Default</button> <button data-rh="Top" data-rh-at="top">Top</button> <button data-rh="Right" data-rh-at="right">Right</button> <button data-rh="Bottom" data-rh-at="bottom">Bottom</button> <button data-rh="Left" data-rh-at="left">Left</button> <button data-custom data-custom-at="bottom" data-cat-id="10913">Click Me</button> <button data-custom data-custom-at="bottom" data-cat-id="416088">Click Me</button> </div> } } render(<App />, demo)

GitHub

Recommended