Blazor Tooltip Overview

The Blazor Tooltip component replaces the default browser tooltip to show the title or alt attribute of its target in a beautiful, cross-browser popup. You can specify a CSS selector to attach it to multiple targets, the tooltip size, and customize its content according to the current target through a template, which lets you also load content on demand. You can also choose a position relative to the target and the event on which it shows.

The Tooltip component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

To use a Telerik Tooltip for Blazor

1. Add the TelerikTooltip tag and set its TargetSelector parameter to a CSS selector that will match the element(s) you want to attach the tooltip to.
2. Add elements to act as targets and set their title attribute.

Basic Tooltip attached to anchors inside paragraphs to show their titles

<TelerikTooltip TargetSelector="p a[title]">
</TelerikTooltip>

<p>
    <a title="what is 'lorem ipsum'?" href="https://lipsum.com/">lorem</a>
    ipsum dolor
    <a title="is this a real word?" href="https://en.wikipedia.org/wiki/SIT">sit</a>
    amet.
</p>

The result from the code snippet above after hovering the "lorem" link

Component namespace and reference

<TelerikTooltip @ref="@theTooltipRef" TargetSelector=".someTarget">
</TelerikTooltip>

@code{
    Telerik.Blazor.Components.TelerikTooltip theTooltipRef { get; set; }
}

The Tooltip provides the following features:

• Class - the CSS class of the tooltip container. You can use it to customize the tooltip appearance (such as color, font, elements in your template, and so on). To apply custom styles to the tooltip element itself, use a descendant combinator, for example:

  <TelerikTooltip Class="my-class" />
  
  <style>
  .my-class .k-tooltip {
      padding: 0;
  }
  <style>
  

• Height- the height of the tooltip. If left empty, stretches to accommodate the content. See the Dimensions article. Do not use % values because percentage values heavily depend on the styles of the parent element and the tooltip does not have a well defined parent element that can be properly relative to all possible targets.

• Id - the id attribute of the tooltip. Can be useful so you can point an aria-described-by attribute of your target to the tooltip ID for the benefit of screen readers.
• Position - where the tooltip shows up in comparison to its target element. See more at the Position article.
• ShowOn - what triggers the tooltip to show up. See more at the Show Event article.
• TargetSelector - the CSS selector that controls which elements the Tooltip component will associate itself with. It can be a single element (e.g., an ID selector such as #myTarget), or a broader selector that targets a number of elements at the same time (such as p.specialParagraph a to target all anchors in a special paragraph).
• Template - a RenderFragment that lets you generate content for the tooltip based on metadata for the target. You can also fetch data on demand for the tooltip content through that. You can see examples in the Tooltip Template article.
• Width - The width of the tooltip. If left empty, stretches to accommodate the content. See the Dimensions article. Do not use % values because percentage values heavily depend on the styles of the parent element and the tooltip does not have a well defined parent element that can be properly relative to all possible targets.

To have the tooltip stretch according to your content, you should leave both the Width and Height parameters empty. If one of them has a value, the HTML element will have some layout and you may get unexpected results in terms of size and position.

If you will be loading large content on demand, you should set dimensions that will accommodate the expected content and layout.

See Also

• Position
• Show Event
• Template
• Live Demo: Tooltip