at

Description

Optional. Defines the tooltip placement relative to the hovered element

Usage

at?: "point"
   | "top" | "bottom" | "left" | "right"
   | "top-start" | "top-center" | "top-end"
   | "bottom-start" | "bottom-center" | "bottom-end"
   | "left-start" | "left-center" | "left-end"
   | "right-start" | "right-center" | "right-end";

Parameters

• "top-center" - (default) tooltip appears above the element, centered
• "top" / "top-start" / "top-end" - above the element; bare "top" is the same as "top-center"
• "bottom" / "bottom-start" / "bottom-center" / "bottom-end" - below the element
• "left" / "left-start" / "left-center" / "left-end" - to the left of the element
• "right" / "right-start" / "right-center" / "right-end" - to the right of the element
• "point" - tooltip follows the mouse cursor; arrow is ignored in this mode

Example

<Tooltip at="bottom-center" arrow>
  <div data-tooltip-text="Saved successfully">Save</div>
</Tooltip>

Related article: Configuring tooltip position

Related sample: Tooltip