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

<ejs-tooltip id="tooltip" content="Tooltip content" position="TopCenter">
    <e-content-template>
        <div id="box" style="display: inline-block;">
            <input type="button" id="disabledbutton" disabled value="Disabled button" />
        </div>
    </e-content-template>
</ejs-tooltip>


<style>
    #tooltip {
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: auto;
    }

    #disabledbutton {
        pointer-events: none;
        color: graytext;
    }
</style>

Disabled.cs

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

Output be like the below.