For our UX design, we want to use a Radzen Tooltip with a delay to get the same results as an Html Title= title - HTML: HyperText Markup Language | MDN (mozilla.org) . The problem we encountered using the delay feature of Radzen.Tooltip was tooltips were not being removed at times from the queue and popup up or the last popup appeared in the wrong position for an instant and re-positioned correctly. Below is a repro:
The code below (modified from the radzen website) attempts to use MouseEnter to show the popup, and MouseLeave to close the popup. For the repro, move the mouse quickly across 3 of the buttons and land on the 4th button. The expectation is that due to the delay, those first 3 tooltips should not appear as they should have been closed, and only the last tooltip should appear. What happens is all 4 popups appear in a sequence one after another. It is behaving as if all the popups were queued up and not removed the list.
Upon further testing of this code and moving the delay to 200ms, there are flashes of tooltips that can appear as the last popup becomes visible in the wrong location and then renders at the correct location.
Is there a way to have a delay of 500ms, and if the tooltipService.Close is called on MouseLeave before the 500ms has elapsed, the tooltip would be removed from the queue in a reliable way?
Our goal is to have a grid full of text areas which are ellipsed where the mouse could be moving across these cells, and only when the mouse pauses over a cell, is there a tooltip. We are mimicking the HTML title= feature, but we want more style control via the Radzen tooltip.
@inject TooltipService tooltipService
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Class="rz-p-12">
<RadzenButton Text="Left" MouseLeave="@(args => tooltipService.Close())" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){Delay=700, Duration=0, Position = TooltipPosition.Left }))" />
<RadzenButton Text="Top" MouseLeave="@(args => tooltipService.Close())" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){Delay=700, Duration=0, Position = TooltipPosition.Top }))" />
<RadzenButton Text="Bottom" MouseLeave="@(args => tooltipService.Close())" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){Delay=700, Duration=0, Position = TooltipPosition.Bottom }))" />
<RadzenButton Text="Right" MouseLeave="@(args => tooltipService.Close())" MouseEnter="@(args => ShowTooltip(args, new TooltipOptions(){Delay=700, Duration=0, Position = TooltipPosition.Right }))" />
</RadzenStack>
@code {
void ShowTooltip(ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, "Some content", options);
}
thanks
Rob
Radzen Blazor Studio Professional owner
