How to disable tooltip when ValidationMessage is empty

Question

Hello,Here's my snippet :[...]SfTooltip Target="#adresse-1" OpensOn="Hover">	TooltipTemplates>		Content>                    ValidationMessage For="@(() => Adresse.Adresse1)" />		/Content>	/TooltipTemplates>	SfTextBox ID="adresse-1" Placeholder='Adresse 1' @bind-Value="@Adresse.Adresse1" FloatLabelType='@FloatLabelType.Auto'>/SfTooltip>[...]                                                                    The tooltip appears as expected but I want it to not appears when there is no Validation Message.Any Tips ?Brice.

Shameer Ali Baig Sulaiman Ali Baig · Accepted Answer

Hi Brice, Greetings from Syncfusion support. We have looked into your requirement on displaying validation Tooltip for textbox, only when the textbox value is invalid. We have updated our previous shared solution for showing Tooltip only on validating the textboxes. In the below solution, when you focus out on any textbox, validation will take place and if textbox is empty then Tooltip will open with validation message and it will remain open, until validate the textbox or focus on other textboxes. Please, find the solution below. [index.razor] @page "/" @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Inputs @using System.ComponentModel.DataAnnotations; @inject IJSRuntime JsRuntime @using Newtonsoft.Json

Save

@code{ [Inject] public IJSRuntime JSRuntime { get; set; } SfTooltip tooltipObj; private Test model; private EditContext editContext; protected override void OnInitialized() { model = new Test(); editContext = new EditContext(model); } public class Test { [Required] public string TestProperty { get; set; } } public void focused(FocusInEventArgs args) { tooltipObj.Close(); } public async Task TestPropertyBlurEvent(FocusOutEventArgs args, string ID) { if (!editContext.Validate()) { // Pass the id of the focused out of textbox to the client side to open the tooltip targetted to that textbox. var value1 = await JSRuntime.InvokeAsync("AddPanel", ID); } else { tooltipObj.Close(); } } } To open the tooltip targeted to the last focused out textboxes, we need to pass the target element as argument of open method of Tooltip, this can be achievable by using JS Interop. [_Host.cshtml] Also, validation can be performed by binding the ValidationMessage component with textbox component. This component will DOM element with validation message, if the input field is invalid. And when using TooltipTemplates component to add content of the Tooltip, we cannot check whether tooltip content has any value or not as the component will update the DOM directly and it will not be updated in Content property. So, we open tooltip, when the validation fails in the given solution. Please, download the sample with above solution from the following link. Sample: https://www.syncfusion.com/downloads/support/forum/155379/ze/TextBox_EditForm1959484714 Please, let us know if you need any further assistance. Regards, Shameer Ali Baig S.

Ponmani Murugaiyan · Answer

Hi Brice, Greetings from Syncfusion support. As per your requirement, we have prepared sample for your reference. Please find the code snippet and test sample below. [Index.razor] @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Inputs @using System.ComponentModel.DataAnnotations;

Save

@code{ SfTooltip tooltipObj; private Test model; private EditContext editContext; private string temp { get; set; } private double tipx { get; set; } private double tipy { get; set; } private string cssClass { get; set; } protected override void OnInitialized() { model = new Test(); editContext = new EditContext(model); } public class Test { [Required] public string TestProperty { get; set; } } public void TestPropertyBlurEvent(FocusOutEventArgs args) { if (!editContext.Validate()) { cssClass = "e-error"; tooltipObj.Open(); } else { cssClass = "e-success"; tooltipObj.Close(); } } } Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_EditForm-378715325 Kindly check with the above sample. Please get back us, if you need further assistance. Regards, Ponmani M

Brice FROMENTIN · Answer

Thanks for the answer but with hundreds of Textbox like this, this solution is hard to implement.

Is it possible to have a boolean option on SfTooltip that allow to not display the tootip if it's empty ?

Regards.

Brice.

Brice FROMENTIN · Answer

I tried to "componentized" the answer :@using Syncfusion.Blazor.Inputs@using Syncfusion.Blazor.Popups @ValidationTemplate @code{ SfTooltip tooltip; SfTextBox textbox; [Parameter] public string ID { get; set; } [Parameter] public string Placeholder { get; set; } [Parameter] public bool Readonly { get; set; } [Parameter] public RenderFragment ValidationTemplate { get; set; } [Parameter] public EditContext EditContext { get; set; } private string _value; [Parameter] public string Value { get { return _value; } set { if (_value != value) { ValueChanged.InvokeAsync(value); } _value = value; } } [Parameter] public EventCallback ValueChanged { get; set; } void OnMouseOver(MouseEventArgs args) { EditContext.Validate(); if (textbox.CssClass == "e-error") { tooltip.Open(); } } void OnMouseOut(MouseEventArgs args) { tooltip.Close(); } }And called it liked this : The tooltip never opens.Thx.

Brice FROMENTIN · Answer

Thanks for your solution. I use this one instead :

TypeScript

function hasContent(id) {

var message = document.querySelector("#" + id + "_content > .e-tip-content > .validation-message");

return (message !== null);

}

Razor

void OnOpen(TooltipEventArgs args)

{

var jsRuntimeSync = (IJSInProcessRuntime)jsRuntime;

var hasMessage = jsRuntimeSync.Invoke<bool>("kairos.layout.hasContent", tooltip.ID);

args.Cancel = !hasMessage;

}

Do you think, it is a good way to achieve my requirement ?

Sowmiya Padmanaban · Answer

Hi Brice,  
 
Thanks for your update. 
 
We are happy to know that you found the solution to meet your requirement with Tooltip. If your proposed solution meets your requirement with Tooltip, then you use your proposed solution.  
 
If you face any issue with your solution, then share us the issue replicating sample with us. We will check the problem and provide the solution at the earliest. 
 
Regards,  
Sowmiya.P