Show Tooltip on disabled elements and disable tooltip
17 Feb 20221 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.
- Add a disabled element like the
button
element into a div whose display style is set toinline-block
. - Set the pointer event as
none
for the disabled element (button) through CSS. - Now, initialize the Tooltip for outer div element that holds the disabled button element.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id="tooltip">
@Html.EJS().Tooltip("box").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 {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#disabledbutton {
pointer-events: none;
}
</style>
public ActionResult Disabled()
{
ViewBag.content = "Tooltip from disabled element";
return View();
}