import React from 'react'; import ReactDOM from 'react-dom'; import Tooltip from '../src/index'; class App extends React.Component { constructor(props) { super(props); this.state = { tipOpen: false }; this.toggleTip = this.toggleTip.bind(this); this.bodyClick = this.bodyClick.bind(this); } componentDidMount() { document.addEventListener('mousedown', this.bodyClick); } componentWillUnmount() { document.removeEventListener('mousedown', this.bodyClick); } tipContentRef; buttonRef; toggleTip() { this.setState(prevState => ({ tipOpen: !prevState.tipOpen })); } bodyClick(e) { if ((this.tipContentRef && this.tipContentRef.contains(e.target)) || this.buttonRef.contains(e.target)) { return; } this.setState({ tipOpen: false }); } render() { const { tipOpen } = this.state; return (

React tooltip-lite examples

Basic:

Target Target t { console.log(`Is tooltip open ? \n Answer : ${isOpen ? 'Yes' : 'No'}`); }} content="alert shown" className="target" tipContentClassName=""> Hover Me

In a paragraph

For  inline text , a right or left tip works nicely. The tip will try to go the desired way and flip if there is not enough  space . Shrink the window and see how the tip behaves when close to the  edge . You can also force the direction of the tip and it will allow itself  to go off screen .

Html Contents

You can also have a tooltip with 

An unordered list to demo some html content

)} direction="down" tagName="span" className="target" tipContentClassName="" > Html content .

By specifying the prop "tipContentHover" as true, you can persist hover state when cursor is over the tip. This allows for links in your tip, copying contents and other behaviors. Here's an  You can copy this text, or click this  link )} tagName="span" direction="right" className="target" tipContentClassName="" tipContentHover > example .

Colors

You can pass  color options as props   or use a  css stylesheet.   With the arrowContent prop you have  )} > even more control.

Wrap anything as a target

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt egestas sapien quis lacinia. Praesent ut sem leo. Curabitur vel dolor eu nulla ultrices efficitur a ut mauris. Nulla non odio non nibh venenatis commodo non vitae magna. Nunc porttitor, dolor nec sodales commodo, velit elit auctor arcu, sed dapibus nibh lacus sit amet nunc. Phasellus enim dui, blandit sed faucibus sit amet, feugiat vel urna. Vivamus ut lacus sollicitudin, dignissim risus vel, iaculis leo. Donec lobortis, turpis nec pulvinar venenatis, orci nunc semper sem, nec ornare nisl nisi ut ligula. Integer ut tempus elit. Cras luctus, tellus id vestibulum accumsan, purus velit mattis erat, euismod tempor mauris elit eget metus. Vivamus interdum ex sed egestas tincidunt.
react logo react logo

Custom events

Close on click

Open on click

Toggle on click

Default styles

pass the {'"defaultStyles"'} prop as true to get up and running quick and easy

See default styles

Controlled by props



{ this.tipContentRef = el; }} className="controlled-example">
Hello
This tip is controlled by the button, you can also click outside the tip or on the  {'"x"'}  to close it )} isOpen={tipOpen} tagName="span" direction="down" forceDirection > click the button

Distance and arrow size

Larger arrowSize Smaller arrowSize Increase distance Decrease distance

Compound Alignment

right-start right-end left-start left-end top-start top-end down-start down-end


right-start with arrow right-end with arrow left-start with arrow left-end with arrow down-start with arrow down-end with arrow up-start with arrow up-end with arrow
console.log(`is visible: ${isVisible}`)}> On toggle example     z-index example

Internal scrollbars

Scroll on mobile tapping here
); } } ReactDOM.render(, document.getElementById('react-root'));