Customize the Tooltips of the Blazor Native Report Viewer

The tooltips are working by default and don't require any additional settings.

This article explains how to customize the tooltips of the Report and the viewer's widgets in the Blazor Native ReportViewer.

Custom Tooltip

You may provide a custom template for the tooltips used in the Blazor Native Report Viewer. The template receives a context of type TooltipTemplateContext, which has the following properties:

• Title, string - the title attribute of the underlying HTML element. This is used by the Blazor Tooltip component, and not used in the Report Viewer. The tooltips are set through data attributes.
• DataAttributes, Dictionary - a dictionary of all data attributes set to the element. The keys are all converted from kebab-case to camelCase, and the data- prefix is stripped. So for instance data-tooltip-title is accessed through tooltipTitle.

The Blazor Native Report Viewer provides two data attributes, which hold information:

• tooltipTitle
• tooltipText

Implementing the Customized Tooltip

The following example shows how to set a tooltip template. It is a direct copy of the default tooltip template:

<ReportViewer
    ServiceUrl="/api/reports"
    ...>
    <TooltipTemplate>
        <div class="trv-pages-area-kendo-tooltip">
            <div class="trv-pages-area-kendo-tooltip-title">@context.DataAttributes["tooltipTitle"]</div>
            <div class="trv-pages-area-kendo-tooltip-text">@context.DataAttributes["tooltipText"]</div>
        </div>
    </TooltipTemplate>
</ReportViewer>

There is a bug in the Blazor Tooltip component that's used in the viewer, which causes the tooltip not to be shown when hovering over adjacent elements.

See Also

• Blazor Report Viewer Options
• Blazor Tooltip component