Tooltip open or display modes

2 Mar 20256 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.

<div id='container'>
    <div id="showTooltip">
        <div id="first">
            <ejs-tooltip id="tooltip01" position="TopCenter"  opensOn="Hover" content="Tooltip from hover">
                <e-content-template>
                    <button class="blocks e-btn e-primary e-outline" id="tooltiphover">Hover me!(Default)</button>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip02" position="TopCenter" opensOn="Click" content="Tooltip from click">
                <e-content-template>
                    <button class="blocks e-btn e-primary e-outline" id="tooltipclick">Click me!</button>
                </e-content-template>
            </ejs-tooltip>
        </div>
        <br /><br />
        <div id="second">
            <ejs-tooltip id="tooltip03" position="TopCenter" opensOn="Click" isSticky="true" content="Click close icon to close me">
                <e-content-template>
                    <button class="blocks e-btn e-primary e-outline" id="Mode">Sticky Mode</button>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip06" position="TopCenter" opensOn="Click" openDelay=1000 closeDelay=1000 content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>">
                <e-content-template>
                    <button class="blocks e-btn e-primary e-outline" id="openMode">Tooltip with delay</button>
                </e-content-template>
            </ejs-tooltip>
        </div>
        <br /><br />
        <div id="third">
            <ejs-tooltip id="customTooltip" position="TopCenter" opensOn="Custom" content="Tooltip from custom mode">
                <e-content-template>
                    <button class="blocks e-btn e-primary e-outline" id="tooltipcustom">Double click on me!</button>
                </e-content-template>
            </ejs-tooltip>

            <ejs-tooltip id="tooltip05" opensOn="Hover" position="TopCenter" content="Tooltip from focus">
                <e-content-template>
                    <div id="textbox" class="e-float-input blocks">
                        <input id="focus" type="text" placeholder="Focus and blur" />
                    </div>
                </e-content-template>
            </ejs-tooltip>
        </div>
    </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>

<script>
    document.getElementById('tooltipcustom').addEventListener("dblclick", function () {
        if (this.getAttribute("data-tooltip-id")) {
            document.getElementById('customTooltip').ej2_instances[0].close();
        } else {
            document.getElementById('customTooltip').ej2_instances[0].open(this);
        }
    });

</script>
public ActionResult TooltipView()
{
    return View();
}