We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

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.


Interactive tooltip

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.


Fancy tooltip

You can completely customize a Blazor tooltip using CSS.


Tooltip design

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.


Blazor Tooltip code example

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.

@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 !!";
}



Blazor Components – 80+ UI and DataViz Components

Frequently Asked Questions

  • 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.

We do not sell the Blazor Tooltip separately. It is only available for purchase as part of the Syncfusion Blazor suite, which contains over 80 Blazor components, including the Tooltip. A single developer license for the Syncfusion Essential Studio for Blazor suite costs $995.00 USD, and includes one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our Blazor Tooltip demo here.

No, our 80+ Blazor components, including Tooltip, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their Tooltip alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 80+ Blazor components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

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 and five or fewer developers.

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

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile