React.js Tooltip – Examples and Libraries

A perfect way of giving users a preview of some content without occupying permanent space is via tooltips. In this article we will explore some of the best react.js tooltips components and how to install and use them.

(a) Tooltip

Simple React Tooltips.

Here is how it looks like:

Tooltip requires a child node that accepts an onMouseEnter, onMouseLeave, onFocus, onClick event. This means the child node must be a built-in component like div or span, or a custom component that passes its props to its built-in component child.

Step 1: How to Install

Install it via npm:

npm install rc-tooltip

Step 2: Write Code

Start by requiring it:

var Tooltip = require('rc-tooltip');

Now render it in DOM:

ReactDOM.render(
  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
    <a href="#">hover</a>
  </Tooltip>,
  container
);

Here's a simplified example of rendering tooltips in react via rc-tooltips:

var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');

// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'

ReactDOM.render(
  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
    <a href="#">hover</a>
  </Tooltip>,
  container
);

Example

Here is a full React example for displaying tooltips in different sides like top,left,bottom etc.

import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap_white.css';

const text = <span>Tooltip Text</span>;
const styles = {
  display: 'table-cell',
  height: '60px',
  width: '80px',
  textAlign: 'center',
  background: '#f6f6f6',
  verticalAlign: 'middle',
  border: '5px solid white',
};

const rowStyle = {
  display: 'table-row',
};

const Test = () => (
  <div style={{ display: 'table' }}>
    <div style={rowStyle}>
      <Tooltip
        placement="left"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Left</a>
      </Tooltip>
      <Tooltip
        placement="top"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Top</a>
      </Tooltip>
      <Tooltip
        placement="bottom"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Bottom</a>
      </Tooltip>
      <Tooltip
        placement="right"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Right</a>
      </Tooltip>
    </ div>
    <div style={rowStyle}>
      <Tooltip
        placement="leftTop"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Left Top</a>
      </Tooltip>
      <Tooltip
        placement="leftBottom"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Left Bottom</a>
      </Tooltip>
      <Tooltip
        placement="rightTop"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Right Top</a>
      </Tooltip>
      <Tooltip
        placement="rightBottom"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Right Bottom</a>
      </Tooltip>
    </div>
    <div style={rowStyle}>
      <Tooltip
        placement="topLeft"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Top Left</a>
      </Tooltip>
      <Tooltip
        placement="topRight"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Top Right</a>
      </Tooltip>
      <Tooltip
        placement="bottomLeft"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Bottom Left</a>
      </Tooltip>
      <Tooltip
        placement="bottomRight"
        overlay={text}
        arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
      >
        <a href="#" style={styles}>Bottom Right</a>
      </Tooltip>
    </div>
  </div>
);

ReactDOM.render(<Test />, document.getElementById('__react-content'));

View demo result here

Reference

Read more here.

React Tooltip

React tooltip component.

• The tooltip sets type: dark place: top effect: float as default attributes. You don't have to add these options if you don't want to change the defaults
• The option you set on <ReactTooltip /> component will be implemented on every tooltip in a same page: <ReactTooltip effect="solid" />
• The option you set on a specific element, for example: <a data-type="warning"></a> will only affect this specific tooltip

Step 1: Install

You can install it in the following two ways:

npm install react-tooltip

or

yarn add react-tooltip

Step 2: Write Code

Using NPM

1 . Require react-tooltip after installation

import ReactTooltip from 'react-tooltip';

2 . Add data-tip = "your placeholder" to your element

<p data-tip="hello world">Tooltip</p>

3 . Include react-tooltip component

<ReactTooltip />

Standalone

You can import node_modules/react-tooltip/dist/index.js into your page. Please make sure that you have already imported react and react-dom into your page.

Example

Find a full example here.

You can also view demohere

Reference

Read more here