Api.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="col-lg-8 control-section">
        <!-- Tooltip element -->
        <ejs-tooltip id="tooltip" target="#default" content="Tooltip content" opensOn="Click" created="onCreated">
            <e-content-template>
                <ejs-button id="default" content="Show Tooltip"></ejs-button>
            </e-content-template>
        </ejs-tooltip>
    </div>

    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Content</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            <input id="value" type="text" placeholder="Tooltip content">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Height</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            <ejs-numerictextbox id="height" value="45" change="onHeightChange" type="text"></ejs-numerictextbox>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Width</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            <ejs-numerictextbox id="width" value="100" change="onWidthChange" class="e-input" type="text"></ejs-numerictextbox>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Open Mode</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            <ejs-dropdownlist type="text" tabindex="1" placeholder="Select mode" dataSource="ViewBag.ddlData" change="onModeChange" id='ddlelement'></ejs-dropdownlist>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Sticky Mode</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            <ejs-checkbox id="sticky" type="checkbox" checked="false" change="stickyChange"></ejs-checkbox>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
}

<style>
    .userselect {
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }

    #property {
        padding-top: 200px;
    }

    #default {
        position: absolute;
        left: calc( 50% - 60px);
        top: 35%;
    }

    #value {
        height: 34px;
        width: 136px;
        padding-left: 10px;
    }

    .highcontrast #value {
        border: 1px solid;
        border-width: 1px;
        color: #fff;
        background: #000;
    }
</style>

<script type="text/javascript">
    var tooltipObj;
    var buttonElement
    function onCreated() {
        tooltipObj = document.getElementById("tooltip").ej2_instances[0];
        buttonElement = document.getElementById("default");
        //change event handler for content change
        document.querySelector('#value').addEventListener('change', function () {
            tooltipObj.content = this.value;
            tooltipObj.refresh(buttonElement);
        });

        //Attached scroll and click event listners in right pane
        if (document.getElementById('right-pane')) {
            document.getElementById('right-pane').addEventListener('click', onClick);
            document.getElementById('right-pane').addEventListener('scroll', onScroll);
        }
    }
    //change event handler for height change in Tooltip
    function onHeightChange(args) {
        tooltipObj.height = args.value;
        tooltipObj.refresh(buttonElement);
    }

    //change event handler for width change in Tooltip
    function onWidthChange(args) {
        tooltipObj.width = args.value;
        tooltipObj.refresh(buttonElement);
    }

    //change event handler for mode change in Tooltip
    function onModeChange(args) {
        tooltipObj.opensOn = args.value;
        tooltipObj.close();
    }

    //change event handler for sticky mode in Tooltip
    function stickyChange(args) {
        tooltipObj.isSticky = args.checked;
        tooltipObj.close();
    }

    //scroll event handler to close Tooltip while perfomring page scroll
    function onScroll(args) {
        if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {
            tooltipObj.close();
        }
    }

    //click event handler to close Tooltip while navigating to other tabs in right pane
    function onClick(args) {
        if (args.target.parentNode.className === 'e-tab-text') {
            if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {
                tooltipObj.close();
            }
        }
    }

</script>

@section Meta{
    <meta name="description" content="Essential JS 2 Tooltip control demo showcasing the most frequently used API combinations, like content, height, width, open, sticky mode, and more." />
}