Tooltip / Context Menu

Radzen.Blazor Components
1

Hi,

When using a tooltip on a button in a data grid, the ones near the bottom would flicker.

I solved it with this in my site.css file:

/* Attempts to correct Radzen tooltip flickering */
.rz-tooltip {
    pointer-events: none !important;
}

However, that killed the right click context menu, which I assume uses a tooltip under the hood?

Is there a way to have the CSS above apply to the tooltips only?

Or a better way to prevent the tooltip flickering near the bottom of the page?

Otherwise I would have to add this CSS to each individual page that uses tooltips in a data grid.

Thanks,

Mike

2

Thanks for the detailed report. Two things here:

  1. The context menu stopped working because RadzenContextMenu renders its popup with the same rz-tooltip class. Only the tooltip has role="tooltip", so scope your rule to it and the context menu keeps working. Since it is in site.css it already applies to every page:
.rz-tooltip[role="tooltip"] {
    pointer-events: none !important;
}
  1. The flicker itself is a bug on our side. When a Bottom tooltip does not fit below the element and flips to Top, we measured it with the wrong arrow class and placed it about 13px over the target element. The tooltip landed under the mouse pointer, the button received mouseleave, and the tooltip closed and reopened. It is fixed for the next release. Until then, the CSS above or Position = TooltipPosition.Top for tooltips near the bottom of the page avoids it.

Keep in mind that pointer-events: none also prevents users from hovering the tooltip to keep it open (WCAG 1.4.13), so you may want to remove the rule once you update.

3

Thank you for lightning fast response!

Mike