[HxTooltip] Empty Text property causes error.

[phillipmunn]

Hello,

We're using the HxTooltip in our Blazor Server .NET 8 application and we have some logic to change the text displayed in the tooltip based on some conditions - for example we allow the user to toggle a checkbox, which might change the content that should be shown in the tooltip.

If the text is empty though, after a re-render, we see the following crash.

We can fix it by ensuring that the tooltip always has text - is there something we should be doing other than excluding the HxToolTip tag completely if we don't want it shown? I notice there's only an "Enable/Disable" method, not a property for this component.

Error: Microsoft.JSInterop.JSException: TOOLTIP: Option "title" provided type "null" but expected type "(string|element|function)".
_typeCheckConfig@https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js:6:7196
_getConfig@https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js:6:68998
W@https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js:6:7409
cs@https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js:6:62513

@code {
    bool isChecked = false;
}

<Havit.Blazor.Components.Web.Bootstrap.HxCheckbox Text="Toggle me?" @bind-Value="isChecked">

</Havit.Blazor.Components.Web.Bootstrap.HxCheckbox>

@{
    var tooltip = "";
    if (isChecked) 
    {
        tooltip = "Checked";
    }
    <Havit.Blazor.Components.Web.Bootstrap.HxTooltip Html="true" Text="@(tooltip)">
        <div>
            Hover over me to see the tooltip.
        </div>
    </Havit.Blazor.Components.Web.Bootstrap.HxTooltip>
}

[oscar230]

If I understood your question correctly, you could try something along these lines in the code block of the razor file.

private string _tooltip = string.Empty;
private string tooltip
{
    get{
        return _tooltip;
    }
    set{
        if (string.IsWhiteSpaceOrEmpty(value))
        {
            hxTooltip.Enable = false;
        }
        else
        {
            hxTooltip.Enable = true;
        }
        this.StateHasChanged();
        _tooltip = value;
    }
}