Search results

How To

Show Tooltip on disabled elements

By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.

  1. Add a disabled element like the button element into a div whose display style is set to inline-block.
  2. Set the pointer event as none for the disabled element (button) through CSS.
  3. Now, initialize the Tooltip for outer div element that holds the disabled button element.

{% tab template=“layout/tooltip/disabled-elements”, isDefaultActive=true, sourceFiles=“index.ts,index.html,index.css”, es5Template=“disabled-template” %}

razor
disabled.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
 <div id="tooltip">
    @Html.EJS().Tooltip("box").Content("Tooltip from disabled element").ContentTemplate(@<div>
        <div id="box" style="display: inline-block;">
            <input type="button" id="disabledbutton" disabled value="Disabled button" />
        </div>
    </div>).Render()
</div>


<style>
    #tooltip {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    #disabledbutton {
        pointer-events: none;
    }
</style>
public ActionResult Disabled()
{
    ViewBag.content = "Tooltip from disabled element";
    return View();
}

Load HTML tags into tooltip

The Tooltip component loads HTML tags using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

Here, Bold, Italic, Underline, and Anchor tags are used.

When using HTML elements as content to Tooltip make the content element display: none, then from the beforeRender event we can make the element visible again using below code.

    document.getElementById('content').style.display = 'block';
razor
html-content.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
@{
    var content = "<div id=\"tooltip\">" +
"        <h2>HTML Tags</h2>" +
"        Through templates, <b><span style=\"color:#e3165b\">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content" +
"    </div>";


}
<div id="container">
    @Html.EJS().Tooltip("target").CssClass("customtooltip").Content(content).ContentTemplate(@<div id="tooltipContent">
    <div class="content">
        <button class="text" id="Title">HTML(With Title)</button>
    </div>
</div>).Render()
</div>


<style>
    #tooltipContent table {
        margin: 0 auto;
    }

    #tooltipContent {
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 100px;
    }

    .text {
        text-transform: capitalize;
        width: 155px;
    }

    .header {
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 12px;
        padding-bottom: 2px;
        margin: 4px -7px 7px -7px;
        padding-right: 5px;
        padding-left: 6px;
        font-weight: bold;
        height: 18px;
        border-bottom: 1px solid white;
    }

    .e-tooltip-css.e-tooltip-wrap .e-tip-content {
        padding: 0 10px 10px 10px;
    }
</style>
public ActionResult TooltipView()
{
    return View();
}

Load HTML pages into tooltip

Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property, which supports both string and HTML tags.

To load an iframe element in tooltip, set the required iframe in the content of tooltip while initializing the tooltip component. Refer to the following code.

content: '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
razor
html-page.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
@{
    var content = "<iframe src=\"https://www.syncfusion.com/products/essential-js2\" id=\"tooltipFrame\"></iframe>";
}

<div id='container'>
    <div id="tooltipContent">
        <div class="content">
            @Html.EJS().Tooltip("target").CssClass("e-tooltip-css").OpensOn("Click").Width("350").Height("250").Content(content).ContentTemplate(@<button class="text e-btn e-primary e-outline" id="iframeContent">Embedded Iframe</button>).Render()
        </div>
    </div>
</div>


<style>
    #tooltipContent {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 65px 10px;
    }

    .content {
        display: inline-block;
        width: 49%;
    }

    #tooltipFrame {
        width: 332px;
        height: 233px;
    }

    .content button {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
public ActionResult TooltipView()
{
    return View();
}

Define tooltip open mode property

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.

razor
open-custom.cs
@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();
}

Customize tooltip

The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side. The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to the tooltip positions like TopCenter, BottomLeft, RightTop, and more.

Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.

** Curved tip **

The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the following CSS class of tip arrow.

    cssClass = 'curvetips e-tooltip-css',
    .e-arrow-tip-outer.e-tip-bottom,
    .e-arrow-tip-outer.e-tip-top {
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    .e-arrow-tip.e-tip-top {
        transform: rotate(170deg);
    }

** Bubble tip **

The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize the bubble tip arrow, override the following CSS class of tip arrow.

    cssClass: 'bubbletip e-tooltip-css'
    .e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
    {
        border-radius: 50px;
        height: 10px;
        width: 10px;
    }

    .e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
    {
        border-radius: 50px;
        height: 10px;
        width: 10px;
    }

These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip position can be changed by using the radio button click event.

The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.

razor
custom-tooltip.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id='container'>
    <div id="customization" class="customTipContainer">
        @Html.EJS().Tooltip("arrow").Content("Tooltip arrow customized").CssClass("curvetips e-tooltip-css").ContentTemplate(@<button id="target">
            Customized Tip Arrow
        </button>).Render()
        <div id="positions">
            <ul>
                <li>
                    @Html.EJS().RadioButton("element1").Label("TopCenter").Value("TopCenter").Checked(true).Change("onChange").Render()
                </li>
                <li>
                    @Html.EJS().RadioButton("element2").Label("BottomLeft").Value("BottomLeft").Checked(false).Change("onChange").Render()
                </li>
            </ul>
        </div>
    </div>
    <div id="balloon" class="customTipContainer">
        @Html.EJS().Tooltip("bubble").Content("Tooltip arrow customized as balloon tip").CssClass("bubbletip e-tooltip-css").ContentTemplate(@<button id="bubbletip">
            Bubble Tip Arrow
        </button>).Render()
        <div id="btn">
            <ul>
                <li>
                    @Html.EJS().RadioButton("radio1").Label("BottomLeft").Value("BottomLeft").Checked(false).Change("onChanged").Render()
                </li>
                <li>
                    @Html.EJS().RadioButton("radio2").Label("TopRight").Value("TopRight").Checked(true).Change("onChanged").Render()
                </li>
            </ul>
        </div>
    </div>
    <div id="disabledContainer" class="customTipContainer">
        @Html.EJS().Tooltip("tooltip").Content("Disabled tooltip pointer").CssClass("pointertip e-tooltip-css").ContentTemplate(@<button id="tooltip">
            Disabled Tip Arrow
        </button>).Render()
    </div>
</div>

<script>
    function onChange(args) {
        document.getElementById('arrow').ej2_instances[0].position = args.value;
        document.getElementById('arrow').ej2_instances[0].dataBind();
    }
    function onChanged(args) {
        var bubble = document.getElementById('bubble').ej2_instances[0];
        bubble.position = args.value;
        if (bubble.position == 'BottomLeft') {
            bubble.offsetY = -30;
        } else {
            bubble.offsetY = 0;
        }
        bubble.dataBind();
    }

</script>


<style>
    #bubbletip {
        border-color: #d2a679;
    }

    #target {
        border-color: #e86238;
    }

    li {
        list-style: none;
    }

    .e-radio-wrapper {
        margin-top: 18px;
    }

    #target,
    #bubbletip,
    #tooltip {
        box-sizing: border-box;
        padding: 20px;
        width: 200px;
        text-align: center;
        top: -17px;
        margin-bottom: 40px;
    }

    /* csslint ignore:start */

    @@font-face {
        font-family: "tip";
        src: url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.tff") format("truetype"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.woff") format("woff"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.eot") format("eot"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.svg?#tip") format("svg");
        font-weight: normal;
        font-style: normal;
    }

    /* csslint ignore:end */

    /* csslint ignore:start */

    #container {
        width: 100%;
    }

    .customTipContainer {
        width: 400px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }

    #disabledContainer {
        margin-top: 25px;
    }

    .pointertip.e-tooltip-wrap .e-tip-content,
    .curvetips.e-tooltip-wrap .e-tip-content {
        color: white;
    }

    .pointertip.e-tooltip-wrap.e-popup {
        background-color: #80180d;
        border: 3px solid #ff9999;
    }

    .curvetips .e-arrow-tip.e-tip-top {
        margin-left: -20px;
        top: -16px;
        transform: rotate(177deg);
        left: 50px;
    }

    .curvetips.e-tooltip-wrap {
        padding: 17px;
        border-radius: 5px;
    }

        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom:before,
        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top:before {
            font-family: "tip" !important;
            speak-as: none;
            font-size: 21px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\e700";
            color: #e86238;
        }

        .curvetips.e-tooltip-wrap.e-popup {
            background: #e86238;
            border: none;
        }

        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
            border-left: none;
            border-right: none;
            border-top: none;
        }

        .curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom:before,
        .curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
            content: none;
        }

        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
        .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
            top: -1px;
        }

        .curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-bottom,
        .curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-top {
            position: absolute;
            height: 18px;
            width: 28px;
        }

    #positions {
        display: inline-block;
    }

    #btn {
        display: inline-block;
    }

    #target .e-tip-content {
        padding: 0px;
    }

    .bubbletip.e-tooltip-wrap {
        padding: 8px;
    }

        .bubbletip.e-tooltip-wrap .e-tip-content {
            border-radius: 50%;
            text-align: center;
            color: white;
        }

        .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
            height: 40px;
            width: 50px;
        }

        .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
            height: 40px;
            width: 40px;
        }

        .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
            height: 12px;
            width: 20px;
        }

        .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
            height: 12px;
            width: 20px;
        }

        .bubbletip.e-tooltip-wrap.e-popup {
            border: 5px solid #dfccad;
            background-color: #7b5e32;
        }

        .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
            height: 10px;
            width: 10px;
            border: 1px solid #dfccad;
            background-color: #7b5e32;
            border-radius: 50px;
            margin-top: 20px;
            margin-right: 20px;
        }

    .e-arrow-tip.e-tip-top {
        margin-left: 60px;
    }

    .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
        border: 1px solid #dfccad;
        border-radius: 50px;
        background-color: #7b5e32;
        width: 10px;
        height: 10px;
        margin-left: 20px;
    }

    .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
        border-bottom: 6px solid transparent;
        border-right: 20px solid #dfccad;
        border-top: 6px solid transparent;
    }

    .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
        border-bottom: 6px solid transparent;
        border-left: 20px solid #dfccad;
        border-top: 6px solid transparent;
    }

    .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
        margin-top: -2px;
        margin-left: 8px;
        content: none;
        top: 1px !important;
        border: 2px solid #dfccad;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: #7b5e32;
    }

    .bubbletip .e-arrow-tip.e-tip-top {
        left: 44px !important;
        top: -19px !important;
    }

    .bubbletip .e-arrow-tip.e-tip-bottom {
        top: 88.9% !important;
        left: 4px !important;
    }

    .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
        top: 10px !important;
        border: 2px solid #dfccad;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: #7b5e32;
    }

        .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
            content: None;
        }

    .bubbletip.e-tooltip-wrap .e-tip-content {
        border-radius: inherit;
    }

    .bubbletip.e-tooltip-wrap.bubbletip {
        width: 150px !important;
        border-radius: 50%;
    }

    /* csslint ignore:end */
</style>
public ActionResult MouseTrailing()
{
    return View();
}

Display tooltip on SVG and canvas elements

Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show tooltips on data visualization elements.

razor
svg-canvas.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id="container">
    <div id="box" class="e-prevent-select">
        @Html.EJS().Tooltip("tooltip01").Content("SVG Square").Target("#rectShape").ContentTemplate(@<div class="circletool" id="rectShape" style="left:1%;top:10%">
            <svg>
                <rect id="square" class="shape" x="50" y="20" width="50" height="50" style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9" />
            </svg>
        </div>).Render()
        @Html.EJS().Tooltip("tooltip02").Content("SVG Ellipse").Target("#ellipseShape").ContentTemplate(@<div class="circletool" id="ellipseShape" style="top:65%;">
            <svg>
                <ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40" style="fill:#0450C2;stroke:none;stroke-width:2" />
            </svg>
        </div>).Render()
        @Html.EJS().Tooltip("tooltip03").Content("SVG PolyShape").Target("#polyShape").ContentTemplate(@<div class="circletool" id="polyShape" style="top:25%;left:40%">
            <svg>
                <polyline id="polyline" class="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:#ffffff;stroke:#0450C2;stroke-width:4" />
            </svg>
        </div>).Render()
        @Html.EJS().Tooltip("tooltip04").Content("Canvas Circle").Target("#circleShape").ContentTemplate(@<div class="circletool" id="circleShape" style="top:16%;left:72%">
            <canvas id="circle" class="shape" width="60" height="60"></canvas>
        </div>).Render()
        @Html.EJS().Tooltip("tooltip05").Content("Canvas Triangle").Target("#triShape").ContentTemplate(@<div class="circletool" id="triShape" style="top:73%;left:76%">
            <canvas id="triangle" class="shape" width="100" height="50"></canvas>
        </div>).Render()
    </div>
</div>



<script>

    window.onload = function () {
        var canvas = document.getElementById('triangle');
        var context;
        if (canvas.getContext) {
            context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(0, 50);
            context.lineTo(100, 50);
            context.lineTo(50, 0);
            context.fillStyle = "#FDA600";
            context.fill();
        }
        canvas = document.getElementById('circle');
        context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 30;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = '#0450C2';
        context.fill();

    };
</script>

<style>
    @@media (max-width: 500px) {
        #rectShape {
            /* csslint ignore:start */
            left: -11% !important;
            /* csslint ignore:end */
        }

        #ellipseShape {
            /* csslint ignore:start */
            left: -20% !important;
            /* csslint ignore:end */
        }

        #polyShape {
            /* csslint ignore:start */
            left: 28% !important;
            /* csslint ignore:end */
        }

        #circleShape {
            /* csslint ignore:start */
            left: 68% !important;
            /* csslint ignore:end */
        }

        #triShape {
            /* csslint ignore:start */
            left: 65% !important;
            /* csslint ignore:end */
        }
    }

    @@media (min-width: 500px) and (max-width: 600px) {
        #triShape {
            /* csslint ignore:start */
            left: 70% !important;
            /* csslint ignore:end */
        }
    }

    #container {
        width: 80%;
        margin: 0 auto;
    }

    .e-tooltip-css {
        filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
    }

    #control-container {
        /* csslint ignore:start */
        padding: 0 !important;
        /* csslint ignore:end */
    }

    #box {
        border: 1px solid #dddddd;
        background: #ffffff;
        box-sizing: border-box;
        height: 320px;
        position: relative;
    }

    .circletool {
        position: absolute;
    }
</style>
public ActionResult MouseTrailing()
{
    return View();
}

Create and show tooltip on multiple targets

Tooltip can be created and shown on multiple targets within a container by defining the specific target elements to the target property. So, the tooltip is initialized only on matched targets within a container.

razor
multi-target.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id="container">
    <form id="details" role="form">
        <div id="user">
            <div class="info">User Name:</div>
            <div class="inputs">
                @Html.EJS().Tooltip("tooltip1").Position(Position.RightCenter).Target("#uname").ContentTemplate(@<input type="text" id="uname" class="e-info e-input" name="firstname" title="Please enter your name" />).Render()
            </div>
        </div>
        <br />
        <div>
            <div class="info">Email Address:</div>
            <div class="inputs">
                @Html.EJS().Tooltip("tooltip2").Position(Position.RightCenter).Target("#mail").ContentTemplate(@<input type="text" id="mail" class="e-info e-input" name="email" title="Enter a valid email address" />).Render()
            </div>
        </div>
        <br />
        <div>
            <div class="info">Password:</div>
            <div class="inputs">
                @Html.EJS().Tooltip("tooltip3").Position(Position.RightCenter).Target("#pwd").ContentTemplate(@<input id="pwd" type="password" class="e-info e-input" name="password" title="Be at least 8 characters length" />).Render()
            </div>
        </div>
        <br />
        <div>
            <div class="info">Confirm Password:</div>
            <div class="inputs">
                @Html.EJS().Tooltip("tooltip4").Position(Position.RightCenter).Target("#cpwd").ContentTemplate(@<input id="cpwd" type="password" class="e-info e-input" name="Cpwd" title="Re-enter your password">).Render()
            </div>
        </div>
        <br />
        <div class="btn">
            <input id="sample" type="button" class="e-btn" value="Submit" />
            <input id="clear" type="reset" value="Reset" class="e-btn" />
        </div>
    </form>
</div>


<script>
    document.getElementById('sample').addEventListener('click', function () {
        var tooltip1 = document.getElementById('tooltip1').ej2_instances[0];
        var tooltip3 = document.getElementById('tooltip3').ej2_instances[0];
        var name = document.getElementById('uname').value;
        var pwd = document.getElementById('pwd').value;
        var cpwd = document.getElementById('cpwd').value;
        if (name.length > 0 & name.length < 4) {
            document.getElementById('uname').title = 'Required Minimum 4 Characters';
            document.getElementById('uname').style.backgroundColor = 'red';
            var target = document.getElementById('uname');
            tooltip1.open(target);
        } else {

            document.getElementById('uname').style.backgroundColor = 'white';
        }
        if (pwd !== '' && pwd.length < 8) {
            document.getElementById('pwd').title = 'Required Minimum 8 Characters';
            document.getElementById('pwd').style.backgroundColor = 'red';
            var pwdtarget = document.getElementById('pwd');
            tooltip3.open(pwdtarget);
        } else {
            document.getElementById('pwd').style.backgroundColor = 'white';
        }
        if (name.length >= 4 && pwd !== '' && pwd.length >= 8 && pwd == cpwd) {
            alert('Form Submitted');
        } else {
            alert('Details are not Valid');
        }
    })
    document.getElementById('clear').addEventListener('click', function () {
        var tooltip1 = document.getElementById('tooltip1').ej2_instances[0];
        var tooltip3 = document.getElementById('tooltip3').ej2_instances[0];

        document.getElementById('uname').style.backgroundColor = 'white';
        document.getElementById('pwd').style.backgroundColor = 'white';
        var target = document.getElementById('uname');
        tooltip1.close(target);
        document.getElementById('uname').title = 'Please enter your name';
        var pwdtarget = document.getElementById('pwd');
        tooltip3.close(pwdtarget);
    });

</script>

<style>
    #details .info {
        font-weight: bold;
        width: 165px;
        display: inline-block;
        margin-left: 10px;
    }

    #details .inputs {
        display: inline-block;
    }

    #details .btn {
        margin-top: 10px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
    }

    #details #sample {
        margin-left: 10px;
    }

    #details #clear {
        margin-left: 10px;
    }

    #details {
        padding-top: 30px;
        padding-bottom: 30px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
    }
</style>
public ActionResult MouseTrailing()
{
    return View();
}

Change tooltip content dynamically

The tooltip content can be changed dynamically using the AJAX request.

The AJAX request should be made within the beforeRender event of the tooltip. On every success, the corresponding retrieved data will be set to the content property of the tooltip.

When you hover over the icons, its respective data will be retrieved dynamically and then assigned to the tooltip’s content.

Refer to the following code snippet to change the tooltip content dynamically.

function onBeforeRender(args): void {
    this.content = 'Loading...';
    this.dataBind();
    var ajax = new Ajax('./tooltip.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            for (var i: number = 0; i < result.length; i++) {
                if (result[i].Id == args.target.id) {
                    /* tslint:disable */
                    this.content = result[i].Sports;
                    /* tslint:enable */
                }
            }
            this.dataBind();
        },
        (reason: any) => {
            this.content = reason.message;
            this.dataBind();
        });
}
razor
dynamic-content.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div id="container">
    <h2> Dynamic Tooltip content </h2>
    @Html.EJS().Tooltip("Tooltip").BeforeRender("onBeforeRender").Position(Position.TopCenter).Target(".circletool").ContentTemplate(@<div id="box" class="e-prevent-select">
        <div id="1" class="circletool bold-01" style="display:inline-block"></div>
        <div id="2" class="circletool italic" style="display:inline-block"></div>
        <div id="3" class="circletool underline-02" style="display:inline-block"></div>
        <div id="4" class="circletool cut-02" style="display:inline-block"></div>
        <div id="5" class="circletool copy" style="display:inline-block"></div>
        <div id="6" class="circletool paste" style="display:inline-block"></div>
    </div>).Render()
</div>



<script>
    function onBeforeRender(args) {
        this.content = 'Loading...';
        this.dataBind();
        var ajax = new ej.base.Ajax('./tooltip.json', 'GET', true);
        ajax.send().then(
            (result) => {
                result = JSON.parse(result);
                for (let i = 0; i < result.length; i++) {
                    if (result[i].Id == args.target.id) {
                        this.content = result[i].Name;
                    }
                }
                this.dataBind();
            },
            (reason) => {
                this.content = reason.message;
                this.dataBind();
            }
        );
    }
</script>


<style>
    h2 {
        text-align: center;
        margin-bottom: 50px;
    }

    #box {
        height: 80px;
        position: relative;
        text-align: center;
    }

    .circletool {
        height: 35px;
        width: 35px;
    }

    .underline-02 {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.4685001373291,8) scale(0.5,0.5) ' fill='%23000000' d='M3.4180251,28.362L22.712003,28.362 22.712003,32 3.4180251,32z M16.780006,0L26.126,0 26.126,1.6599731 24.738978,1.6599731C23.977016,1.6599731 23.436978,1.9559937 23.024991,2.5900269 22.936002,2.723999 22.738004,3.1849976 22.738004,4.8179932L22.738004,14.367981C22.738004,16.776001 22.495025,18.684021 22.011993,20.041992 21.501983,21.440979 20.50998,22.655029 19.051974,23.64502 17.605992,24.632996 15.618996,25.127014 13.168987,25.127014 10.511032,25.127014 8.4430419,24.646973 7.0330101,23.703003 5.6169964,22.76001 4.5989924,21.466003 4.0070134,19.862976 3.6140085,18.765991 3.4139965,16.812988 3.4139968,13.888977L3.4139968,4.6790161C3.4139965,2.9509888 3.1200517,2.3649902 2.950008,2.164978 2.6440392,1.8289795 2.1230438,1.6589966 1.3900127,1.6589966L0,1.6589966 0,0.0009765625 11.186996,0.0009765625 11.186996,1.6589966 9.7790385,1.6589966C8.9750233,1.6589966 8.4330321,1.8850098 8.1130257,2.3590088 7.9830209,2.5510254 7.7700082,3.0949707 7.7700082,4.6790161L7.7700082,14.948975C7.7700082,15.838989 7.8470345,16.872009 8.0129891,18.026001 8.1730233,19.130005 8.4490233,19.984985 8.8450194,20.572021 9.2380238,21.161987 9.8149882,21.653015 10.558029,22.039978 11.313033,22.426025 12.25401,22.622009 13.381023,22.622009 14.827982,22.622009 16.134009,22.304993 17.26798,21.677979 18.374974,21.065979 19.141025,20.280029 19.545016,19.346008 19.957978,18.364014 20.16501,16.638 20.16501,14.218018L20.16501,4.6779785C20.16501,2.8049927 19.894992,2.3480225 19.808017,2.2509766 19.459994,1.8510132 18.920016,1.6589966 18.171971,1.6589966L16.780006,1.6589966 16.780006,0.0009765625z' /%3e%3c/g%3e%3c/svg%3e ");
	}

	.bold-01 {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(8.00000047683716,8) scale(0.5,0.5) ' fill='%23000000' d='M14.847002,16.674988C13.794,16.674988 12.893998,16.690002 12.148999,16.719971 11.572,16.75 11.086,16.779968 10.686998,16.839966L10.686998,29.120972C12.543,29.495972 14.391001,29.690979 16.178998,29.690979 19.166,29.690979 21.461002,29.075989 23.007003,27.875977 24.536002,26.70697 25.311,25.221985 25.311,23.482971 25.311,22.328003 24.955001,21.203003 24.260001,20.138977 23.570003,19.088989 22.422,18.234009 20.847003,17.619995 19.247001,17.005005 17.230001,16.674988 14.847002,16.674988z M14.925001,2.2189941C13.375001,2.2189941,11.948999,2.3689575,10.686998,2.6539917L10.686998,14.140015C11.231,14.230957 11.836,14.289978 12.502999,14.334961 13.309999,14.394958 14.191,14.411011 15.154001,14.411011 17.586,14.411011 19.428001,14.185974 20.629001,13.705994 21.803001,13.255981 22.715003,12.550964 23.340003,11.620972 23.969001,10.677002 24.285003,9.6270142 24.285003,8.5169678 24.285003,6.7630005 23.513,5.322998 21.928001,4.0789795 20.350001,2.848999 17.991998,2.2189941 14.925001,2.2189941z M0,0L15.384001,0C18.208003,0 20.503001,0.19500732 22.209003,0.57000732 24.834003,1.125 26.874,2.1589966 28.273002,3.6140137 29.675002,5.0830078 30.387,6.7929688 30.387,8.6969604 30.387,10.33197 29.826003,11.815979 28.719001,13.120972 27.827003,14.170959 26.578002,14.994995 24.998,15.609985 26.888,16.089966 28.363998,16.765015 29.395003,17.648987 31.123,19.118958 31.999999,20.947998 31.999999,23.092957 31.999999,24.69696 31.426002,26.271973 30.295005,27.740967 29.161002,29.226013 27.591003,30.320984 25.622001,30.994995 23.683002,31.654968 20.702003,32 16.771001,32L0,32 0,30.469971 1.6809998,30.469971C3.0099984,30.469971 3.932999,30.110962 4.4949995,29.360962 4.7329985,29.045959 5.0229994,28.205994 5.0229994,26.106995L5.0229994,5.8779907C5.0229994,3.5839844 4.6679999,2.7290039 4.370999,2.4289551 3.776997,1.8289795 2.8939973,1.5289917 1.6809998,1.5289917L0,1.5289917z' /%3e%3c/g%3e%3c/svg%3e ");
	}

	.italic {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23000000' d='M8,0L28,0 28,4 18,4 13.200012,28 20,28 20,32 0,32 0,28 9.4000244,28 14.400024,4 8,4z' /%3e%3c/g%3e%3c/svg%3e ");
	}

	.cut-02 {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(10.9177500107586,8) scale(0.499999940395362,0.499999940395362) ' fill='%23000000' d='M4.2434211,24.486929C3.1234166,24.487921 1.9864136,25.411931 1.5303855,26.803925 1.2234067,27.730923 1.2683899,28.699915 1.6553864,29.461907 1.9403927,30.015906 2.3644075,30.402913 2.8894059,30.568913 4.1804323,31.000903 5.6704354,30.001914 6.2174368,28.350916 6.756443,26.700928 6.1504502,25.008931 4.8604307,24.58393 4.6584334,24.51792 4.4514308,24.486929 4.2434211,24.486929z M16.081534,24.483923C15.874531,24.484931 15.66753,24.516928 15.465532,24.58393 14.173498,25.008931 13.569489,26.700928 14.107519,28.350916 14.655497,30.001914 16.144522,30.993914 17.436526,30.568913 17.961554,30.402913 18.385539,30.015906 18.670546,29.461907 19.057541,28.699915 19.099534,27.730923 18.795546,26.803925 18.338541,25.411931 17.202546,24.481925 16.081534,24.483923z M3.8974099,0L10.162478,12.849954 16.428523,0C16.830533,0.04499804 17.086548,0.76598901 15.822529,5.3079834 14.713511,9.3009687 12.318502,14.999957 11.838487,16.182951 13.408507,19.674946 12.730492,19.907948 14.43052,21.300934 15.510515,22.189938 17.086548,23.035929 17.874548,23.649926 18.846541,24.189932 19.656546,25.15392 20.062556,26.394928 20.481566,27.649914 20.40057,28.986916 19.860558,30.066916 19.422566,30.927905 18.706557,31.561905 17.854529,31.839905 15.865529,32.497908 13.771517,31.059908 12.844507,28.767909 12.253499,27.298918 12.61248,23.269938 12.232502,21.840941 11.977496,20.886933 11.025491,19.689946 10.162478,18.668938 9.2984566,19.689946 8.3464532,20.886933 8.0924525,21.840941 7.7134518,23.262934 8.0704493,27.298918 7.4794411,28.767909 6.5534382,31.059908 4.4594264,32.488905 2.4743941,31.839905 1.6173919,31.555909 0.90339658,30.927905 0.46540476,30.066916 -0.075615607,28.986916 -0.14760718,27.649914 0.26337645,26.386918 0.66837875,25.15392 1.4873858,24.189932 2.4573953,23.649926 3.2464034,23.035929 4.8154168,22.189938 5.8954434,21.300934 7.5944628,19.899937 6.9164481,19.674946 8.5144534,16.236952 8.0044703,14.999957 5.6114445,9.3009687 4.501419,5.3079834 3.2384078,0.76598901 3.495429,0.04499804 3.8974099,0z' /%3e%3c/g%3e%3c/svg%3e ");
	}

	.copy {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.6852502822876,8) scale(0.5,0.5) ' fill='%23000000' d='M15.844,11.559021L15.844,15.695984C15.844,15.695984,15.764998,18.413025,12.761999,18.177002L9.253997,18.194031 9.253997,29.643982C9.253997,29.908997,9.4619972,30.117004,9.7219984,30.117004L22.904995,30.117004C23.163998,30.117004,23.371998,29.90802,23.371998,29.643982L23.374996,29.643982 23.374996,12.026978C23.374996,11.768982,23.166996,11.559021,22.906994,11.559021z M10.267996,2.28302L10.267996,7.3029785C10.267996,7.3029785,10.176001,10.598999,6.5360023,10.315002L2.2779993,10.333008 2.2779993,24.223022C2.2779995,24.536987,2.5360028,24.79303,2.8560022,24.79303L7.368003,24.79303 7.368003,17.700012 13.235998,11.47998 13.251997,11.47998 14.971998,9.6740112 19.405996,9.6740112 19.405996,2.8499756C19.405996,2.5369873,19.151999,2.28302,18.835997,2.28302z M9.2209999,0L18.837996,0C20.415999,0,21.695997,1.2789917,21.695997,2.8530273L21.695997,9.677002 22.902996,9.677002 22.905995,9.6749878C24.202999,9.6749878,25.258999,10.728027,25.258999,12.028015L25.258999,29.643982C25.258999,30.945984,24.202999,32,22.905995,32L9.7229978,32C8.4230033,32,7.3690025,30.944031,7.3690025,29.643982L7.3690025,27.078003 2.8570017,27.078003C1.2770001,27.078003,-1.3611906E-07,25.798035,1.4210855E-14,24.221985L1.4210855E-14,9.7319946 7.1129981,2.1940308 7.140998,2.1940308z' /%3e%3c/g%3e%3c/svg%3e ");
	}

	.paste {
	  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23000000' d='M14,18L14,30 26,30 26,22 22,22 22,18z M12,16L24,16 24,18 26,18 26,20 28,20 28,32 12,32z M0,2L2,2 2,6 20,6 20,2 22,2 22,14 10,14 10,30 0,30z M8,0L14,0 14,2 16,2 16,4 6,4 6,2 8,2z' /%3e%3c/g%3e%3c/svg%3e ");
	}
</style>
public ActionResult MouseTrailing()
{
    return View();
}