Dont show a tool tip if the content is Empty

[Jeremy]

Hi,

is it possible to not show the tool tip graphics if the "Content" is empty please?

I want to use tool tips to provide information only in certain conditions. So for example when certain business logic has occurred, I will set the "Content" with some information. Other times the "Content" will be string.empty.

I would figure it would be reasonable that if there was not content, do not show the tool tip as per below

Thanks,
Jeremy

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Jeremy, 

 

Greetings from Syncfusion support. 

 

We have checked your requirement with Blazor SF Tooltip component. We would like to let you know that, if you are adding content using Content property for Tooltip component. Then, you can dynamically modify the content string based on your code condition. 

 

We have prepared a simple sample with the above explained solution, in which we will initially render Tooltip component with content as a string. Then, on clicking the button below, we will dynamically change the Tooltip content as String.Empty. And in Tooltip’s onOpen (which will trigger before tooltip popup display in UI) event, we will check whether Content properties value is string or not. If not, then we will prevent Tooltip pop-up from displaying in UI by setting args.Cancel as true. 

 

[index.razor] 

 

@page "/" 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Popups 

 

<SfTooltip @ref="TooltipInstance" ID="tooltip" IsSticky="true" Target="#target" Content="@TooltipContent" OnOpen="onTooltipOpen"> 

    <div id='container'> 

        <p> 

            A green home is a type of house designed to be 

            <a id="target"> 

                <u>environmentally friendly</u> 

            </a> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes 

            have become more prevalent we have also seen the emergence of green affordable housing. 

        </p> 

    </div> 

</SfTooltip> 

 

<SfButton @ref="ToggleBtn" @onclick="onToggleClick" CssClass="e-flat" IsPrimary="true" Content="@Content"></SfButton> 

 

@code { 

    SfButton ToggleBtn; 

    SfTooltip TooltipInstance; 

    public string Content = "Delete_Content"; 

    string TooltipContent = "<div><b>Environmentally friendly</b> or environment-friendly, (also referred to as eco-friendly, nature-friendly, and green) are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</div>"; 

    private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 

    { 

        this.TooltipContent = String.Empty; 

        this.StateHasChanged(); 

    } 

 

    private void onTooltipOpen(TooltipEventArgs args) 

    { 

        if (this.TooltipContent == "") 

        { 

            args.Cancel = true; 

        } 

    } 

} 

 

 

Or, if your requirement is to display Tooltip content using its Template property based on the textbox validation. Then, please refer to the following forum link. In which we have provided solution and samples to meet the requirement with Tooltip component. 

 

https://www.syncfusion.com/forums/155296/how-to-disable-tooltip-when-validationmessage-is-empty  

 

Check out the following links to know more about Blazor SF Tooltip component. 

 

Demos: https://blazor.syncfusion.com/demos/tooltip/default  

 

Documentation: https://blazor.syncfusion.com/documentation/tooltip/getting-started/  

 

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

 

Regards, 

Shameer Ali Baig S. 

[Jeremy]

HI Shameer,

I have just implemented and can confirm that achieves what I am after.

Thank you,

Jeremy

[Sowmiya Padmanaban]

Hi Jeremy,  

  

We are happy to hear that your issue has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P 

[Jeremy]

Hi,

can you please have a look at the following code example (Blazor server)

Target="#InputField"

Content="@ToolTipContent"

OnOpen="OnTooltipOpen">

Placeholder="Search"

ShowClearButton=true

@onkeypress='@(e => KeyPressed(e))'

@oninput='@(e => OnInput(e))'>

@code {

string ToolTipContent = String.Empty;

private string _inputValue = String.Empty;

public void OnInput(Microsoft.AspNetCore.Components.ChangeEventArgs args)

{

_inputValue = (string)args.Value;

}

public void KeyPressed(KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

if (_inputValue.Length == 0)

{

ToolTipContent = "Search text must not be String.Empty";

}

else

{

ToolTipContent = "";

}

StateHasChanged();

}

}

private void OnTooltipOpen(TooltipEventArgs args)

{

if (String.IsNullOrEmpty(ToolTipContent)) args.Cancel = true;

}

}

for the most part this works, but if you perform the following actions

• click in the text box, and leave the cursor hovering on the text box
• type the letter "a" then press enter
• move the mouse away (so that it is no longer hovering on the text box - but do not click on anything so that the text box retains focus)
• wait 10 seconds
• move the mouse cursor back so that it is hovering over the text box
• press the backspace key - this should delete the letter "a"
• press the "enter" key

[Jeremy]

I cant seem to post the exception stack trace because the reply page is telling me

You have tried to enter a word or URL that is not allowed on this site. If you believe that this is inaccurate, please contact us at [email protected].

so I have sent the details to the specified support address.

[Sabitha Rajamani]

From: Jeremy Reynolds
Sent: Tuesday, September 15, 2020 5:42 AM
To: Syncfusion Support
Subject: Reply to forum question rejected 

  

Hi, I am trying to post an exception stack trace for the following thread 

 

https://www.syncfusion.com/forums/157822/dont-show-a-tool-tip-if-the-content-is-empty 

 

but the forum page is rejecting the information. Below is the stack trace that I am trying to supply as part of the forum information that is being rejected 

 

blazor.server.js:19 [2020-09-15T09:31:29.938Z] Error: Microsoft.JSInterop.JSException: Cannot set property 'position' of null  

TypeError: Cannot set property 'position' of null 

at t.reposition (sf-tooltip-ffbe68.min.js:1:20635) 

at Object.updateProperties (sf-tooltip-ffbe68.min.js:1:24997) 

at blazor.server.js:8:31619 

at new Promise () 

at e.beginInvokeJSFromDotNet (blazor.server.js:8:31587) 

at blazor.server.js:1:20052 

at Array.forEach () 

at e.invokeClientMethod (blazor.server.js:1:20022) 

at e.processIncomingData (blazor.server.js:1:18006) 

at e.connection.onreceive (blazor.server.js:1:11091) 

at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args) 

at Syncfusion.Blazor.Popups.SfTooltip.OnParametersSetAsync() 

at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) 

at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle) 

 

Regards, 

Jeremy Reynolds 

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Jeremy, 

 

Sorry for the inconvenience. 

 

We have validated your reported problem. It is a known issue in Tooltip component. The fix for this issue is already included this week’s patch release (v18.2.58) 

 

The issue with “Unable to cancel the tooltip OnOpen event for the second time” has been resolved with this week’s release which was rolled out on 15^th September 2020. 

 

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.58/?type=all#tooltip  

 

We have prepared a sample with the solution fix, for your convenience. Please, download the sample from the following link. 

 

https://www.syncfusion.com/downloads/support/forum/157822/ze/Blazor_Tooltip-1984658429  

 

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

 

Regards, 

Shameer Ali Baig S.