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