A tooltip is a box of information that labels a UI element that is hovered over

import { Tooltip, Infotip } from '@trendmicro/react-tooltip';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-tooltip/dist/react-tooltip.css';

// Right tooltip
<Tooltip content="Config settings">
    <button>Settings</button>
</Tooltip>

// Right tooltip with a function content
<Tooltip
    content={() => {
        return (<span style={{ whiteSpace: 'nowrap' }}>{'Right tooltip'}</span>);
    }}
>
    <sapn>Hover on me</span>
</Tooltip>

// Top tooltip
<Tooltip placement="top" content="Top tooltip"><sapn>Hover on me</span></Tooltip>

// Infotip
<Infotip content="This is a simple example for infotip.">
    <span className="icon icon-info-sign" />
</Infotip >

<Infotip placement="rightTop" content="This is a simple example for infotip.">
    <span className="icon icon-info-sign" />
</Infotip >

<Infotip
    tooltipStyle={{ wordWrap: 'break-word' }}
    content="Pneumonoultramicroscopicsilicovolcanoconiosis is the longest word. Start01234567890123456789012345678901234567890123456789012345678901234567890123456789End Start0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789End"
>
    <span>Hover on me (infotip with long article)</span>
</Infotip>