Class Position

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

Inheritance

System.Object

Position

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class Position : Enum

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

BottomCenter

Positions the tooltip below the target element, horizontally centered with respect to the target's width.

Declaration

public const Position BottomCenter

Field Value

Type
Position

Remarks

BottomCenter positioning places the tooltip directly below the target element with the tooltip's horizontal center aligned with the target's horizontal center. This is another commonly used position that provides excellent visibility when there's insufficient space above the target. The tooltip's top edge will be positioned near the target's bottom edge.

BottomLeft

Positions the tooltip below the target element, aligned with the target's left edge.

Declaration

public const Position BottomLeft

Field Value

Type
Position

Remarks

BottomLeft positioning places the tooltip below the target element with the tooltip's left edge aligned with the target's left edge. This position maintains consistent left alignment and is useful when screen space above the target is limited. The tooltip's top edge will be positioned near the target's bottom edge.

BottomRight

Positions the tooltip below the target element, aligned with the target's right edge.

Declaration

public const Position BottomRight

Field Value

Type
Position

Remarks

BottomRight positioning places the tooltip below the target element with the tooltip's right edge aligned with the target's right edge. This position maintains consistent right alignment and is useful for right-aligned UI layouts. The tooltip appears below the target without extending beyond the target's right boundary.

LeftBottom

Positions the tooltip to the left of the target element, aligned with the target's bottom edge.

Declaration

public const Position LeftBottom

Field Value

Type
Position

Remarks

LeftBottom positioning places the tooltip to the left side of the target element with the tooltip's bottom edge aligned with the target's bottom edge. This position maintains bottom alignment and is useful when you want the tooltip to align with the target's lower portion. The tooltip's right edge will be positioned near the target's left edge.

LeftCenter

Positions the tooltip to the left of the target element, vertically centered with respect to the target's height.

Declaration

public const Position LeftCenter

Field Value

Type
Position

Remarks

LeftCenter positioning places the tooltip to the left side of the target element with the tooltip's vertical center aligned with the target's vertical center. This position provides optimal balance and is commonly used when there's adequate space to the left of the target. The tooltip's right edge will be positioned near the target's left edge.

LeftTop

Positions the tooltip to the left of the target element, aligned with the target's top edge.

Declaration

public const Position LeftTop

Field Value

Type
Position

Remarks

LeftTop positioning places the tooltip to the left side of the target element with the tooltip's top edge aligned with the target's top edge. This position is useful for wide layouts where horizontal space is available on the left side. The tooltip's right edge will be positioned near the target's left edge.

RightBottom

Positions the tooltip to the right of the target element, aligned with the target's bottom edge.

Declaration

public const Position RightBottom

Field Value

Type
Position

Remarks

RightBottom positioning places the tooltip to the right side of the target element with the tooltip's bottom edge aligned with the target's bottom edge. This position maintains bottom alignment and is useful when you want the tooltip to align with the target's lower portion. The tooltip's left edge will be positioned near the target's right edge.

RightCenter

Positions the tooltip to the right of the target element, vertically centered with respect to the target's height.

Declaration

public const Position RightCenter

Field Value

Type
Position

Remarks

RightCenter positioning places the tooltip to the right side of the target element with the tooltip's vertical center aligned with the target's vertical center. This position provides optimal balance and is commonly used when there's adequate space to the right of the target. The tooltip's left edge will be positioned near the target's right edge.

RightTop

Positions the tooltip to the right of the target element, aligned with the target's top edge.

Declaration

public const Position RightTop

Field Value

Type
Position

Remarks

RightTop positioning places the tooltip to the right side of the target element with the tooltip's top edge aligned with the target's top edge. This position is useful for layouts where horizontal space is available on the right side. The tooltip's left edge will be positioned near the target's right edge.

TopCenter

Positions the tooltip above the target element, horizontally centered with respect to the target's width.

Declaration

public const Position TopCenter

Field Value

Type
Position

Remarks

TopCenter positioning places the tooltip directly above the target element with the tooltip's horizontal center aligned with the target's horizontal center. This is one of the most commonly used positions as it provides clear visibility without obscuring the target element. The tooltip's bottom edge will be positioned near the target's top edge.

TopLeft

Positions the tooltip above the target element, aligned with the target's left edge.

Declaration

public const Position TopLeft

Field Value

Type
Position

Remarks

TopLeft positioning places the tooltip above the target element with the tooltip's left edge aligned with the target's left edge. This position is useful when you want to maintain left alignment between the tooltip and target. The tooltip appears above the target without extending beyond the target's left boundary.

TopRight

Positions the tooltip above the target element, aligned with the target's right edge.

Declaration

public const Position TopRight

Field Value

Type
Position

Remarks

TopRight positioning places the tooltip above the target element with the tooltip's right edge aligned with the target's right edge. This position is useful when you want to maintain right alignment between the tooltip and target. The tooltip appears above the target without extending beyond the target's right boundary.