Havit.Blazor
Havit.Blazor copied to clipboard
[HxTooltip] Empty Text property causes error.
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/[email protected]/dist/js/bootstrap.bundle.min.js:6:7196 _getConfig@https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js:6:68998 W@https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js:6:7409 cs@https://cdn.jsdelivr.net/npm/[email protected]/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>
}
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;
}
}