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