New to Telerik UI for Blazor? Download free 30-day trial

Add tooltips to the Drawer items


Product Drawer for Blazor


I would like to add Tooltips to the Drawer's navigation icons.


To add a tooltip to the drawer navigation icons you have to use the ItemTemplate to set a title attribute to the desired element (like the span that contains the icon).

If using a TelerikTooltip, add a suitable CSS selector, which targets the span with the icon, to the TargetSelector parameter of the component.

Add a tooltip to the Drawer navigation icons

@* Add a Telerik Tooltip to the Drawer *@

<TelerikTooltip TargetSelector=".k-drawer-items span.k-icon[title]" />

    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@FontIcon.Menu">Toggle drawer</TelerikButton>

<TelerikDrawer Data="@Data"
    <ItemTemplate Context="item">
        <span class="k-icon k-i-@item.Icon" title="@item.Title"></span>
        <span class="k-item-text">@item.Text</span>

@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            new DrawerItem { Title="Counter Title", Text = "Counter", Icon = FontIcon.Plus, Url = "counter" },
            new DrawerItem { Title="FetchData Title", Text = "FetchData", Icon = FontIcon.GridLayout, Url = "fetchdata" },

    public class DrawerItem
        public string Title { get; set; }
        public string Text { get; set; }
        public FontIcon? Icon { get; set; }
        public string Url { get; set; }
In this article