useTooltipPosition

This hook is ideally used only within a modal and provides you with the ability to obtain coordinates to locate an element in relation to another element. Ideally for tooltips or popups.

Props

target

The element that will be used as a reference.

containerId

The element that you want to locate. By default, it will grab the modal-type=back.

containerOffsets

Generalized distance from the target element to the container.

zoneOutOffsets

When assigned a value, when the container mounts, it will generate a zone around it, and with this parameter, you can define the distance. Ideal for popups.

debug

When set to true, the zone configured with zoneOutOffsets becomes visible.

onZoneLeave

Function executed when the mouse leaves the modal zone. This zone is the target element by default, but if zoneOutOffsets is defined, the zone will be the element. By default, it executes a closeModal, but you can customize it with your own callback.

pointTarget

Reference point of the target where you want to locate the container. You can choose from these options:

lt: Top left

t: Top

rt: Top right

lb: Bottom left

b: Bottom

rb: Bottom right

You can also provide relative coordinates in the form of an object like:

{ x: -50, y: 100 }

These coordinates are relative, meaning that, for example, y: 100 would be 100% of the container's height.

pointContainer

Reference point of the container. You can use the same possible options as pointTarget.

Example

In the Popup, you can see its most basic use for positioning the points, where there is a distribution of "b" on the target and "t" on the container: