The Blazor Tooltip component enhances the default browser tooltips in a beautiful, cross-browser popup. The Tooltip component allows customization of its size, content, position and show event. Attach a single Tooltip instance to multiple targets to optimize the performance.
The Tooltip component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Tooltip component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Tooltip will automatically display the value of
alt attributes of HTML elements. The example below demonstrates this scenario, but it's also possible to define custom content in a template.
- Use the
- Set the Tooltip's
TargetSelectorparameter to a
stringthat is a CSS selector or CSS combinator. It should point to the HTML element(s) that will trigger a tooltip.
- (optional) Set the Tooltip's
Positionparameters. They will depend mostly on the Tooltip content and the targets' position on the page.
<TelerikTooltip TargetSelector=".tooltip-target" />
<div style="padding: 5em;">
Hover the button ...
<TelerikButton Icon="@SvgIcon.Eye" Title="Hello world!" Class="tooltip-target" />
... and the question mark:
<span title="I am a Telerik Blazor Tooltip." class="tooltip-target">
<TelerikSvgIcon Icon="@SvgIcon.QuestionCircle" />
For better performance, use one single Tooltip instance for multiple targets, especially if the targets are similar and a lot in number.
The Tooltip normally appears above its target, but can show on all four sides. If there is not enough space, the component will shift or flip its position automatically. Learn how to control the Tooltip position.
By default, the Tooltip displays on mouse over, but it is possible to configure it to show on click or tap.
The Tooltip accepts a nested
<Template> tag, which is a standard Blazor
RenderFragment. It lets you generate content for the Tooltip based on meta data from the target. You can also fetch data on demand for the Tooltip content through that. See examples in the Tooltip Template article.
The Tooltip provides the following configuration parameters. Also check the Tooltip component API.
|Type and Default Value
|Renders a custom CSS class to the
<div class="k-animation-container"> element, which is an ancestor (but not parent) of the
<div class="k-tooltip> element. The former element is responsible for the Tooltip's
z-index styles. The latter element applies the theme styling (borders, background, etc.). Use a CSS class to override theme styles. Here is a custom Tooltip styling example.
|Applies a height style in any supported unit. By default, the component will expand, based on its content. Do not use percentage values - use
vh units instead.
id attribute to the
<div class="k-tooltip> element. To improve accessibility and screen reader behavior, set the same string as Tooltip
aria-described-by attribute of all Tooltip targets.
|Sets the Tooltip popup direction, with regard to its target.
|Sets the browser event, which will trigger the Tooltip to display.
|The CSS selector or combinator, which points to one or multiple Tooltip targets.
|Applies a width style in any supported unit. By default, the component will expand, based on its content. Do not use percentage values - use
vh units instead.
To have the tooltip stretch according to its content, leave both the
Heightparameters 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.