Tooltip open or display modes

26 Oct 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

Auto

Tooltip appears when you hover over the target or when the target element receives the focus.

Hover

Tooltip appears when you hover over the target.

Click

Tooltip appears when you click a target element.

Focus

Tooltip appears when you focus (say through tab key) on a target element.

Custom

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();
}