public static T Tooltip <T>(this T component, string tooltip, TooltipAnimation animation = TooltipAnimation.ShiftAway, TooltipPlacement placement = TooltipPlacement.Top, int delayShow = 0, int delayHide = 0) where T : IComponent { if (string.IsNullOrWhiteSpace(tooltip)) { return(component); } return(component.Tooltip( new Raw(UI.Raw(tooltip)), animation: animation, placement: placement, delayShow: delayShow, delayHide: delayHide )); }
public static T Tooltip <T>(this T component, IComponent tooltip, bool interactive = false, TooltipAnimation animation = TooltipAnimation.ShiftAway, TooltipPlacement placement = TooltipPlacement.Top, int delayShow = 0, int delayHide = 0, bool appendToBody = true) where T : IComponent { if (tooltip is null) { return(component); } var rendered = component.Render(); var marker = new object(); (rendered as dynamic).tooltipMarker = marker; rendered.onmouseenter += AttachTooltip; void AttachTooltip(MouseEvent e) { rendered.onmouseenter -= AttachTooltip; if ((rendered as dynamic).tooltipMarker != marker) { return; } var renderedTooltip = UI.DIV(tooltip.Render()); renderedTooltip.style.display = "block"; renderedTooltip.style.overflow = "hidden"; renderedTooltip.style.textOverflow = "ellipsis"; document.body.appendChild(renderedTooltip); var(element, _) = Stack.GetCorrectItemToApplyStyle(component); if (element.HasOwnProperty("_tippy")) { H5.Script.Write("{0}._tippy.destroy();", element); } if (animation == TooltipAnimation.None) { H5.Script.Write("tippy({0}, { content: {1}, interactive: {2}, placement: {3}, delay: [{4},{5}], appendTo: {6} });", element, renderedTooltip, interactive, placement.ToString(), delayShow, delayHide, appendToBody ? document.body.As <object>() : "parent".As <object>()); } else { H5.Script.Write("tippy({0}, { content: {1}, interactive: {2}, placement: {3}, animation: {4}, delay: [{5},{6}], appendTo: {7} });", element, renderedTooltip, interactive, placement.ToString(), animation.ToString(), delayShow, delayHide, appendToBody ? document.body.As <object>(): "parent".As <object>()); } H5.Script.Write("{0}._tippy.show();", element); //Shows it imediatelly, as the mouse is hovering the element // 2020-10-05 DWR: Sometimes a tooltip will be attached to an element that is removed from the DOM and then the tooltip is left hanging, orphaned. component.WhenRemoved(() => { // 2020-10-05 DWR: I presume that have to check this property before trying to kill it in case it's already been tidied up if (element.HasOwnProperty("_tippy")) { H5.Script.Write("{0}._tippy.destroy();", element); } }); } return(component); }