Class TipPointerPosition

Specifies the positioning options for the tip pointer (arrow) that connects the Tooltip to its target element.

Inheritance
System.Object
TipPointerPosition
Namespace: Syncfusion.Blazor.Popups
Assembly: Syncfusion.Blazor.dll
Syntax
public sealed class TipPointerPosition : Enum
Remarks

The TipPointerPosition enumeration controls the placement of the visual pointer that indicates the relationship between the tooltip and its target. The tip pointer provides a clear visual connection, making it obvious which element the tooltip refers to. The actual position depends on the tooltip's overall position relative to the target element (top, bottom, left, or right). Different pointer positions can improve visual balance and alignment in various UI layouts.

Examples

The following example demonstrates how to set tip pointer position:

<SfTooltip Content="Tooltip with custom pointer" TipPointerPosition="TipPointerPosition.Start">
    <div>Target element</div>
</SfTooltip>

Fields

Auto

Automatically determines the optimal tip pointer position based on the tooltip's position and available space.

Declaration
public const TipPointerPosition Auto
Field Value
Type
TipPointerPosition
Remarks

Auto positioning allows the tooltip component to intelligently select the best pointer placement:

  • Considers the tooltip's position relative to the target element
  • Takes into account available viewport space and potential collisions
  • Ensures optimal visual connection between tooltip and target This mode provides the most user-friendly experience by adapting to different scenarios automatically.

End

Positions the tip pointer at the ending edge of the tooltip element.

Declaration
public const TipPointerPosition End
Field Value
Type
TipPointerPosition
Remarks

End positioning places the pointer at the end of the tooltip's edge that faces the target:

  • For top/bottom positioned tooltips: pointer appears at the right edge of the tooltip
  • For left/right positioned tooltips: pointer appears at the bottom edge of the tooltip This position is useful for creating right-aligned or bottom-aligned pointer placement that matches specific UI design requirements.

Middle

Positions the tip pointer at the center of the tooltip element's edge facing the target.

Declaration
public const TipPointerPosition Middle
Field Value
Type
TipPointerPosition
Remarks

Middle positioning places the pointer at the center point of the tooltip's edge that faces the target:

  • For top/bottom positioned tooltips: pointer appears at the horizontal center of the tooltip
  • For left/right positioned tooltips: pointer appears at the vertical center of the tooltip This position provides balanced visual alignment and is commonly used for centered tooltip designs.

Start

Positions the tip pointer at the beginning edge of the tooltip element.

Declaration
public const TipPointerPosition Start
Field Value
Type
TipPointerPosition
Remarks

Start positioning places the pointer at the beginning of the tooltip's edge that faces the target:

  • For top/bottom positioned tooltips: pointer appears at the left edge of the tooltip
  • For left/right positioned tooltips: pointer appears at the top edge of the tooltip This position is useful for creating left-aligned or top-aligned pointer placement that matches UI design requirements.