Tooltip Position

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