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.
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.
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.
The Blazor Tooltip intelligently auto positions its content and arrows. It fits in the best location of the viewport or container.
You can load dynamic content to the Blazor Tooltip on demand using an AJAX callback.
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.
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.
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.
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.
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.
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.
Specify how the Tooltip opens on a page, such as on hovering over, focusing, or clicking target elements.
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.
The Blazor Tooltip supports both SVG and canvas elements. Users can directly attach tooltips to <svg> or <canvas> elements to show data visualization elements.
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,
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.
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.
@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 !!";
}You can find our Blazor Tooltip demo here.
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.
A good place to start would be our comprehensive getting started documentation.
Documentation
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.
