Emptying the tooltip text while displayed brokes the tooltip display

[Brice FROMENTIN]

Hello

The attached project contains also a image with the result.

To reproduce :

1. Click on input to display tooltip with message.
2. Enter some text.
3. Click Submit

Brice.

Attachment: SfTextboxValidation_8c22b089.7z

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Brice, 

 

Greetings from Syncfusion support. 

 

We have looked into your reported problem with Tooltip component. We would like to let you know that Tooltip is independent component, and it would not dynamically detect if the content of the tooltip changes, dynamically.  

 

This is the reason that when the validation message reset to empty, Tooltip’s popup alignment breaks in the UI. To resolve this issue, we need to validate whether the target texbox has valid input content, and need to call the Close() method of the tooltip in textbox’s Blur event. 

 

<SfTooltip @ref="tooltipObj" OffsetX="tipx" OffsetY="tipy" OnOpen="open" OnClose="close" OpensOn="Focus" Target="#sham"> 

                    <SfTextBox @ref="textObj" ID="sham" Placeholder="Test Property" FloatLabelType='@FloatLabelType.Always' @bind-Value="model.TestProperty" CssClass="@cssClass" Blur="TestPropertyBlurEvent"></SfTextBox> 

                    <TooltipTemplates> 

                        <Content> 

                            <ValidationMessage For="@(() => model.TestProperty)"></ValidationMessage> 

                        </Content> 

                    </TooltipTemplates> 

                </SfTooltip> 

 

public void TestPropertyBlurEvent(FocusOutEventArgs args) 

    { 

        if (!editContext.Validate()) 

        { 

           this.tooltipObj.Open(); 

        } 

        else 

        { 

            this.tooltipObj.Close(); 

        } 

    } 

 

 

Also, since you are using textbox for validation we suggest you to Focus as value for opensOn property of Tooltip. Since, tooltip will disappear when focus out the taget textbox, everytime. So, we can keep it open by calling Open() method, only when validation fails. 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Brice FROMENTIN]

Thanks.

[Sowmiya Padmanaban]

Hi Brice,  

  

Most Welcome. We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. We will happy to assist you. 

  

Regards,  

Sowmiya P.