Set horizontal offset position for tooltip

[shmoeaz]

Is there a way to offset the tooltip to the right or left?
The current offset property changes the distance away from the content element. However, I would like to offset to shift the tooltip to the right or left rather than always in the center of the content element.

[gabrieljablonski]

You can set the floating-ui middlewares manually to achieve this.
The main thing is using the offset() middleware with the crossAxis options.

Here's an example.

<Tooltip
  id="my-tooltip"
  middlewares={[
    // change `crossAxis`
    offset({ mainAxis: 10, crossAxis: 50 }),
    flip(),
    shift({ padding: 5 }),
  ]}
/>

The other middlewares are there to keep the other tooltip positioning rules the same, since passing a value to middlewares overrides the defaults.

Check the floating-ui docs for more info.

[shmoeaz]

@gabrieljablonski , thank you for responding so promptly with the solution.