Tooltip on disabled button does not work

[Kristof]

Hi!

How to use tooltip with a disabled button? I tried:

<SfTooltip Content=@Content>

<SfButton OnClick=@OnClick Disabled="true">...</SfButton>

</SfTooltip>

but the tooltip does not appear.

Thanks for the help.

[Keerthana Rajendran]

Hi Kristof, 

 

Thanks for contacting Syncfusion support. 

 

You can show the Tooltip on a disabled button by rendering the button within an inline-block container and add pointer-events CSS. 

 

Refer to the following code. 

 

@using Syncfusion.Blazor.Popups 

@using Syncfusion.Blazor.Buttons 

 

<SfTooltip ID="Tooltip" Height="50px" Width="200px" Target="#box" Content="@Content"> 

   <div id="box" style="display: inline-block;">    

       <SfButton ID="btn" Content="Show Tooltip" Disabled="true"></SfButton> 

  </div> 

</SfTooltip> 

 

@code 

{ 

    string Content="Tooltip on disabled button"; 

} 

<style>    

#btn {                                                                                                

    pointer-events: none; 

} 

</style> 

 

We have attached a sample for your reference in the following link. 

 

https://www.syncfusion.com/downloads/support/forum/172031/ze/Tooltip_on_disabled_button-1548606175 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Kristof]

Thanks. 

The solution works however it disables all pointer interaction with the button, which might be a problem if the disabled state is conditional.

[Keerthana Rajendran]

Hi Kristof, 

 

You’re welcome. 

 

If the disabled state of the Button is conditional, then the provided solution can be modified by adding different class names in the enabled or disabled state.  

 

Refer to the following code. 

 

<SfButton ID="disable" Content="Enable Button" OnClick="onClick"></SfButton> 

<SfTooltip ID="Tooltip" Height="50px" Width="200px" Target="#box" Content="@Content"> 

 <div id="box" style="display: inline-block;">    

     <SfButton ID="btn"  @ref="button" CssClass="@Disable" Content="Show Tooltip" Disabled=@State></SfButton> 

</div> 

</SfTooltip> 

@code 

{ 

    SfButton button; 

    Boolean State = true; 

    string Content="Tooltip on disabled button"; 

    string Disable = "btn-disable"; 

    public void onClick() 

    { 

        State = false; 

        Disable = "btn-enable"; 

    } 

} 

<style>    

.btn-disable{ 

    pointer-events: none; 

} 

</style> 

 

Modified sample can be downloaded from the below link 

 

https://www.syncfusion.com/downloads/support/forum/172031/ze/Tooltip_for_disabled_button-_modified-976066384 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R.