SfTooltip.Content always empty in OnOpen and Opened events

Question

I check SfTooltip.Content in OnOpen event to see if my tooltip is empty to canceled its display but the Content always empty, it is also empty in Opened event.Here is my custom component :@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 OnOpen(TooltipEventArgs args) { Console.WriteLine("[" + tooltip.Content + "]"); args.Cancel = true; } }And a sample call of it :

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 update 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.