Tooltip open or display modes

17 Feb 20222 minutes to read

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:

  • Auto
  • Hover
  • Click
  • Focus
  • Custom


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()
        <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()
        <br /><br />


    #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;
public ActionResult TooltipView()
    return View();