Blazor Tooltip - Custom Popover Control

Overview

The Blazor Tooltip is a pop-up that shows information or messages when users hover over, click, focus, or touch an image, button, anchor tag, etc. The tooltip information can include simple text, images, hyperlinks, or custom templates.

Position and mouse trails

The Blazor Tooltips can be positioned in twelve different areas around the target. Configure the Blazor Tooltip to follow or not follow the mouse pointer. Position the tip pointer at the right, left, top, and bottom.

Smart positioning/auto positioning

The Blazor Tooltip intelligently auto positions its content and arrows. It fits in the best location of the viewport or container.

Dynamic content

You can load dynamic content to the Blazor Tooltip on demand using an AJAX callback.

Animation effects

The Blazor Tooltip has built-in animations that are completely customizable. You can change the animation effect, duration, and delay, and customize transition effects at the application level.

Customizing tooltips

The content of the Tooltip component can easily be customized using templates. It can be loaded with inline HTML, images, iframe, videos, and maps. You can also add a title to the content.

Show and hide

You can show and hide triggers of the Blazor Tooltip using auto, hover, click, focus, and custom modes. Implement your own custom mode to customize the show and hide behaviors.

Offsets

The Blazor Tooltip has options to change the offset position of the Tooltip from the target element. This offset value is defined in pixels.

By default, the Blazor Tooltip will show and hide when hovering in and out. You can stop the show and hide triggers and make the Tooltip visible always.

Triggers

You can show tooltips when you hover, click, touch, and focus on any element.

You can completely customize a Blazor tooltip using CSS.

The Blazor Tooltip component is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel. This is done by simply overriding Sass variables or using our Theme Studio application.

Blazor Tooltip Themes

Blazor Tooltip easy integration.

Easy integration

You just need message and target element to make the tooltip fully functional. It will work out of the box. However, it provides many options to change the position, animation, and appearance.

Open mode

Specify how the Tooltip opens on a page, such as on hovering over, focusing, or clicking target elements.

Blazor Tooltip open mode.

Touch-friendly

The Blazor Tooltip responds to screen size and adapts its contents to fit any touch device. It recognizes touch gestures and displays its message when performing a touch and hold action. It will hide after 1500 ms. This provides the best user experience for touch devices such as phones and tablets.

Blazor Tooltip component is touch-friendly.

SVG and canvas support

The Blazor Tooltip supports both SVG and canvas elements. Users can directly attach tooltips to <svg> or <canvas> elements to show data visualization elements.

Other supported frameworks

Tooltip is also available in Angular, React, Vue, and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Tooltip platforms from the links below,

Accessibility

Fully supports WAI-ARIA accessibility to make it accessible to screen readers and assistive devices.
Based on the WCAG 2.0 standard, UI element visuals such as foreground color, background color, line spacing, text, and images are designed.
Follows WAI-ARIA best practices best practices for implementing keyboard interaction.

Developer-friendly APIs

In the Blazor Tooltip component, you have control over all the UI elements and behaviors. It provides the best user experience through a rich set of developer-friendly APIs.

Easily get started with the Blazor Tooltip using a few simple lines of C# code as demonstrated below. Also explore our Blazor Tooltip example that shows you how to render and configure the Tooltip in Blazor.

razor

@using Syncfusion.Blazor.Tooltip
@using Syncfusion.Blazor.Popups

<SfTooltip ID="Tooltip" Target="#btn" Content="@Content">
<SfButton ID="btn" Content="Show Tooltip"></SfButton>
</SfTooltip>

@code
{
string Content = "Lets go green & Save Earth !!";
}

Frequently Asked Questions

✅ Why should you choose Syncfusion Blazor Tooltip?

The Syncfusion Blazor Tooltip automatically adjusts display position based on the view page without inconsistencies.
Customize the content with icons, images, a dynamic AJAX template, and more.
Enhance the opening and closing of a pop-over with out-of-the-box animations.
One of the best Blazor Tooltip components on the market that offers a feature-rich UI to interact with the software.
Industry-standard themes are included: Material, Fabric, and Bootstrap.
Simple configuration and API.
Supports all modern browsers.
Touch-friendly and responsive UI.
Extensive demos and documentation to learn quickly and get started with Blazor Tooltip.

✅ Where can I find the Syncfusion Blazor Tooltip demo?

You can find our Blazor Tooltip demo here.

✅ Can I download and utilize the Syncfusion Blazor Tooltip for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion Blazor Tooltip?

A good place to start would be our comprehensive getting started documentation.

Rated by users across the globe

Blazor components

The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.