The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode:
Tooltip appears when you hover over the target or when the target element receives the focus.
Tooltip appears when you hover over the target.
Tooltip appears when you click a target element.
Tooltip appears when you focus (say through tab key) on a target element.
Tooltip is not triggered by any default action. So, bind your own events and use either open or close public methods.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id='container'>
<div id="showTooltip">
<div id="first">
@Html.EJS().Tooltip("target01").OpensOn("Hover").Content("Tooltip from hover").ContentTemplate(@<button class="blocks e-btn e-primary e-outline" id="tooltiphover">Hover me!(Default)</button>).Render()
@Html.EJS().Tooltip("target02").OpensOn("Click").Content("Tooltip from click").ContentTemplate(@<button class="blocks e-btn e-primary e-outline" id="tooltipclick">Click me!</button>).Render()
</div>
<br /><br />
<div id="second">
@Html.EJS().Tooltip("target3").OpensOn("Click").Content("Click close icon to close me").IsSticky(true).ContentTemplate(@<button class="blocks e-btn e-primary e-outline" id="Mode">Sticky Mode</button>).Render()
@Html.EJS().Tooltip("target4").OpensOn("Click").Content("Opens and closes Tooltip with delay of <i>1000 milliseconds</i>").OpenDelay(1000).CloseDelay(1000).ContentTemplate(@<button class="blocks e-btn e-primary e-outline" id="openMode">Tooltip with delay</button>).Render()
</div>
<br /><br />
</div>
</div>
<style>
#container {
width: 100%;
}
#textbox {
display: inline-block;
top: -3px;
}
.blocks {
margin: 0 10px 0 10px;
text-transform: none;
width: 168px;
}
#showTooltip {
display: table;
padding-top: 40px;
margin: 0 auto;
}
#focus {
border: 1px solid #ff4081;
text-align: center;
height: 31px;
width: 168px;
}
::placeholder {
color: #ff4081;
}
</style>public ActionResult TooltipView()
{
return View();
}