Blazor Tooltip - Overview

  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

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.

Description

The Telerik UI for Blazor Tooltip is a familiar UI tool that displays information related to any UI element on the page. You can choose whether it opens when the associated element is hovered over, clicked or tapped on.

Browsers have default built-in tooltips, but the Telerik UI for Blazor Tooltip is more robust in its functionality. It replaces the browser-based tooltip to show the title or alt attribute of its target in a modern popup that looks consistent across browsers. Here are a few of the features you get by using this component:

  • Specify a CSS selector to attach the same tooltip to multiple targets.
  • Configure the tooltip size.
  • Customize its content according to the current target through a template.
  • Use templates to load content on demand.
  • Choose a position relative to the target and the event on which it shows.

If you browse the demo above, you will see that a tooltip showing a location’s population will appear upon hovering over that location’s marker. In this case, a single tooltip is used for every instance, and its content is loaded from a <span> title attribute. If you use the “Change Theme” menu to pick different themes and palettes, you can observe how the tooltip changes. You can also use the “Edit in Telerik REPL” link to open this demo in the REPL playground and tweak the code yourself.

This Blazor Tooltip Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.