Show Tooltip on disabled elements and disable Tooltip

2 Mar 20251 minute to read

By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.

1. Add a disabled element like the button element into a div whose display style is set to inline-block.
2. Set the pointer event as none for the disabled element (button) through CSS.
3. Now, initialize the Tooltip for outer div element that holds the disabled button element.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups

<div id="tooltip">
    @Html.EJS().Tooltip("box")
        .Position(Syncfusion.EJ2.Popups.Position.TopCenter)
        .Content("Tooltip from disabled element")
        .ContentTemplate(@<div>
            <div id="box" style="display: inline-block;">
                <input type="button" id="disabledbutton" disabled value="Disabled button" />
            </div>
        </div>)
        .Render()
</div>

<style>
    #tooltip {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }

    #box {
        text-align: center;
    }

    #disabledbutton {
        pointer-events: none;
        padding: 10px 20px;
        font-size: 16px;
    }
</style>

Disabled.cs

public ActionResult Disabled()
{
    ViewBag.content = "Tooltip from disabled element";
    return View();
}

Output be like the below.