Enum Position

Specifies the positioning options that determine where the Tooltip should be displayed relative to its target element.

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

[JsonConverter(typeof(JsonStringEnumConverter))]
public enum Position

Remarks

The Position enumeration provides precise control over tooltip placement around target elements. Each position combines a primary direction (top, bottom, left, right) with an alignment (center, left, right, top, bottom). The tooltip positioning system automatically handles collision detection and may adjust the position if the preferred location would place the tooltip outside the viewport.

Examples

The following example demonstrates how to set tooltip position:

<SfTooltip Content="Positioned at top-center" Position="Position.TopCenter">
    <div>Target element</div>
</SfTooltip>

Fields

Name	Description
BottomCenter	Positions the tooltip below the target element, horizontally centered with respect to the target's width.
BottomLeft	Positions the tooltip below the target element, aligned with the target's left edge.
BottomRight	Positions the tooltip below the target element, aligned with the target's right edge.
LeftBottom	Positions the tooltip to the left of the target element, aligned with the target's bottom edge.
LeftCenter	Positions the tooltip to the left of the target element, vertically centered with respect to the target's height.
LeftTop	Positions the tooltip to the left of the target element, aligned with the target's top edge.
RightBottom	Positions the tooltip to the right of the target element, aligned with the target's bottom edge.
RightCenter	Positions the tooltip to the right of the target element, vertically centered with respect to the target's height.
RightTop	Positions the tooltip to the right of the target element, aligned with the target's top edge.
TopCenter	Positions the tooltip above the target element, horizontally centered with respect to the target's width.
TopLeft	Positions the tooltip above the target element, aligned with the target's left edge.
TopRight	Positions the tooltip above the target element, aligned with the target's right edge.