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]}
/>
◕‿‿◕