Tooltip Position

Updated on Jan 27, 2026

The Tooltip component lets you define the location of its popup according to its target element.

You can control it through the Position parameter, which takes a member of the Telerik.Blazor.TooltipPosition enum:

• Top - the default value
• Bottom
• Right
• Left

The possible positions of the tooltip relative to its target

Explore the possible tooltip positions

@* Setting a position is not mandatory, it defaults to Top *@

<select @bind=@position>
    @foreach (var item in Enum.GetValues(typeof(TooltipPosition)))
    {
        <option value=@item>@item</option>
    }
</select>

<TelerikTooltip TargetSelector="#target" Position="@position">
</TelerikTooltip>

<div id="target" title="@position">hover me to see the tooltip</div>

@code {
    TooltipPosition position { get; set; } = TooltipPosition.Top;
}

<style>
    #target {
        margin: 200px;
        width: 200px;
        border: 1px solid red;
    }
</style>

Next Steps

• Choose a Tooltip Show Event
• Explore ToolTip Templates

See Also

• Blazor Tooltip Overview
• Live Demo: Tooltip Position