Skip to main content

Place

Changing the placement for the ReactTooltip component.

The place prop and the data-tooltip-place attribute accept the following values: 'top' | 'right' | 'bottom' | 'left'.

Using data-tooltip-place attribute​

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a id="my-tooltip-anchor">◕‿‿◕</a>
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
◕‿‿◕

Using place prop​

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

const PLACES = ['top', 'right', 'bottom', 'left']
const [place, setPlace] = useState(0)

<a 
  data-tooltip-id="my-tooltip"
  onClick={() => setPlace(p => (p + 1) % 4)}
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  content={`I'm on the ${PLACES[place]}`}
  place={PLACES[place]}
/>
◕‿‿◕