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' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'.

Using data-tooltip-place attribute​

import { Tooltip } from 'react-tooltip';
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']

<a id="my-tooltip-anchor">◕‿‿◕</a>
{PLACES.map(place => (
  <Tooltip
    key={place}
    anchorSelect="#my-tooltip-anchor"
    content={`Hello world from the ${place}!`}
    place={place}
  />
))}
◕‿‿◕◕‿‿◕◕‿‿◕

Using place prop​

import { Tooltip } from 'react-tooltip';

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

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