React Tooltip

reactjs-popup is built to be a tooltip by default :

const Tooltip = () => (  <Popup    trigger={open => (      <button className="button">Trigger - {open ? 'Opened' : 'Closed'}</button>    )}    position="right center"    closeOnDocumentClick  >    <span> Popup content </span>  </Popup>);

React Tooltip Position

we support almost all position for a tooltip:

import React from 'react';import Popup from 'reactjs-popup';import Card from './Card';//
const POSITION_TYPES = [  'top left',  'top center',  'top right',  'right top',  'right center',  'right bottom',  'bottom left',  'bottom center',  'bottom right',  'left top',  'left center',  'left bottom',  'center center',];
const ToolTipPositions = () => (  <div className="example-warper">    {POSITION_TYPES.map((position, i) => (      <Popup        key={`tp-${i}`}        trigger={          <button type="button" className="button">            {position}          </button>        }        position={position}        on={['hover', 'focus']}        arrow={position !== 'center center'}      >        <Card title={position} />      </Popup>    ))}  </div>);

Smart Tooltip Position

For more accessibility, you should make sure your tooltip is visible under body viewport, in such case you can set position as an array of positions and set keepTooltipInside to true. You can use KeepTooltipInside as an Html selector to make sure your popup is visible under the element viewport

import React from 'react';import Popup from 'reactjs-popup';
const BoundedTooltip = () => (  <div    style={{ height: 200, width: 400, border: '1px solid red' }}    className="tooltipBoundary"  >    <Popup      trigger={        <button type="button" className="button">          Trigger 1        </button>      }      position={['top center', 'bottom right', 'bottom left']}      closeOnDocumentClick      keepTooltipInside=".tooltipBoundary"    >      Tooltip content    </Popup>  </div>);