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
@section ControlsSection{
<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
@section ControlsSection{
    <div id="container">
    @Html.EJS().Tooltip("target").CssClass("customtooltip").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>).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;
}

#tooltip {
    display: none;
}

#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
@section ControlsSection{
    <div id="container">

    </div>

    <div id='container'>
        <div id="tooltipContent">
            <div class="content">
            @Html.EJS().Tooltip("target").CssClass("e-tooltip-css").OpensOn("Click").Width("350").Height("250").Content(@<iframe src="https://www.syncfusion.com/products/essential-js2" id="tooltipFrame"></iframe>).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
@section ControlsSection{
    <div id='container'>
        <div id="showTooltip">
            <div id="first">
                @Html.EJS().Tooltip("target").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("target").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("target").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("target").OpensOn("").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 id="third">
                @Html.EJS().Tooltip("target").OpensOn("Custom").Content("Tooltip from custom mode").ContentTemplate(@<button class="blocks e-btn e-primary e-outline" id="tooltipcustom">Double click on me!</button>).Render()
                @Html.EJS().Tooltip("target").OpensOn("Focus").Content("Tooltip from focus").ContentTemplate(@<div id="textbox" class="e-float-input blocks">
                    <input id="focus" type="text" placeholder="Focus and blur"/>).Render()
                </div>
            </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>
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
@section ControlsSection{
    <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): void {
    document.getElementById('arrow').ej2_instances[0].position = args.value as any;
    document.getElementById('arrow').ej2_instances[0].dataBind();
}
function onChanged(args): void {
    var bubble = document.getElementById('bubble').ej2_instances[0];
    bubble.position = args.value as any;
    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
@section ControlsSection{
    <div id="container">
        <div id="box" class="e-prevent-select">
            @Html.EJS().Tooltip("").Content("SVG Square").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("").Content("SVG Ellipse").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("").Content("SVG 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("").Content("Canvas Circle").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("").Content("Canvas Triangle").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: number = canvas.width / 2;
    var centerY: number = canvas.height / 2;
    var radius: number = 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
@section ControlsSection{
    <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("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("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("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("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
@section ControlsSection{
    <div id="container">
      <h2> Dynamic Tooltip content </h2>
      @Html.EJS().Tooltip("Tooltip").BeforeRender("onBeforeRender").Position("RightCenter").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: any) => {
            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: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M16.163 34.044H31.84V37H16.163zM27.02 11h7.594v1.349h-1.127c-.62 0-1.058.24-1.393.755-.072.11-.233.484-.233 1.81v7.76c0 1.957-.197 3.507-.59 4.61-.414 1.137-1.22 2.123-2.405 2.928-1.175.802-2.79 1.204-4.78 1.204-2.16 0-3.84-.39-4.985-1.157a6.293 6.293 0 0 1-2.459-3.12c-.32-.892-.482-2.478-.482-4.854v-7.483c0-1.404-.239-1.88-.377-2.043-.248-.273-.672-.411-1.267-.411h-1.13V11h9.09v1.347h-1.144c-.653 0-1.094.184-1.354.569-.105.156-.279.598-.279 1.885v8.344c0 .723.063 1.563.198 2.5.13.897.354 1.592.676 2.069.32.48.788.878 1.392 1.192.613.314 1.378.473 2.293.473 1.176 0 2.237-.257 3.159-.767.899-.497 1.521-1.135 1.85-1.894.335-.798.503-2.2.503-4.167v-7.751c0-1.522-.219-1.893-.29-1.972-.282-.325-.721-.481-1.329-.481h-1.13V11z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.bold-01 {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M18.637 25.625v6.987h3.9c1.95 0 3.088 0 3.576-.162.812-.162 1.462-.488 1.95-.975.487-.488.812-1.3.812-2.275 0-.812-.163-1.463-.488-1.95-.325-.487-.974-.975-1.625-1.138-.974-.324-2.437-.487-4.875-.487zm0-10.4V21.4h4.713c2.112 0 1.138 0 1.625-.163.975-.162 1.625-.487 2.112-.974a2.691 2.691 0 0 0 .813-1.95c0-.813-.162-1.463-.65-1.95-.488-.488-1.3-.813-2.113-.975-.487 0 .163-.163-2.274-.163zM13.762 11h9.1c2.113 0 3.575.163 4.55.325.975.162 1.95.488 2.763 1.137.813.488 1.462 1.3 1.95 2.113.488.975.812 1.95.812 3.088 0 1.137-.324 2.274-.975 3.412-.65.975-1.625 1.787-2.6 2.275 1.626.487 2.763 1.3 3.575 2.438.813 1.137 1.3 2.437 1.3 3.9 0 1.137-.324 2.274-.812 3.412-.488 1.137-1.3 1.95-2.275 2.6a7.813 7.813 0 0 1-3.575 1.3c-.813-.163-.813 0-4.063 0h-9.75z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.italic {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M22.434 11h10.504l-.398 1.333-.269-.003c-.804 0-1.3.078-1.615.228-.513.232-.9.546-1.155.953-.28.431-.648 1.44-1.099 2.984l-4.417 15.298c-.484 1.71-.584 2.36-.584 2.606 0 .247.052.443.17.608.122.158.32.293.6.387.217.077.747.182 2.06.273l.404.027L26.249 37H15.063l.507-1.324.216-.009c1.248-.026 1.751-.142 1.96-.232.503-.197.865-.452 1.087-.772.391-.558.811-1.582 1.238-3.05l4.43-15.298c.367-1.235.548-2.174.548-2.789 0-.26-.053-.465-.181-.635-.123-.17-.327-.307-.59-.402-.204-.075-.688-.16-1.839-.16h-.437z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.cut-02 {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M21.941 27.375c-1.393-.028-3.037 1.193-3.48 2.814-.325 1.138-.325 1.952.163 2.927.163.488.65 1.139 1.464 1.301.813.163 1.463.163 2.276-.325.651-.488 1.301-1.3 1.627-2.276.325-1.139.325-1.952-.163-2.928-.325-.487-.65-1.138-1.464-1.463a2.14 2.14 0 0 0-.423-.05zm-6.645-8.838a4.983 4.983 0 0 0-1.55.269c-.65.325-1.302.813-1.464 1.626-.163.813 0 1.464.162 1.951.651.814 1.301 1.464 2.44 1.79 2.114.65 3.903-.326 4.228-1.627.488-.976 0-1.626-.163-2.114-.65-.813-1.3-1.464-2.439-1.789a6.847 6.847 0 0 0-1.214-.106zM31.47 12.3l-5.367 9.431.164.489L37 22.546l-2.602 1.464-8.781.812-1.952.976 1.301 2.603c.488.975.488 2.276.163 3.577-.813 2.602-3.252 4.228-5.366 3.578-2.277-.488-3.415-3.09-2.603-5.692.326-1.463 1.302-2.602 2.44-3.09l2.44-1.3-.977-1.79-2.439 1.3c-1.138.49-2.44.652-3.903.327-2.602-.814-4.228-2.928-3.577-5.204.65-2.277 3.415-3.415 6.016-2.765 1.302.325 2.44 1.301 3.09 2.44l1.138 2.114 1.79-.976 5.691-7.318z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.copy {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M26.612 20.392v3.361s-.064 2.208-2.504 2.016l-2.85.014v9.303a.38.38 0 0 0 .38.384h10.71c.211 0 .38-.17.38-.384h.003V20.772a.38.38 0 0 0-.38-.38zm-4.53-7.537v4.079s-.075 2.678-3.033 2.447l-3.46.015V30.68c0 .255.21.463.47.463h3.666v-5.763l4.768-5.054h.013l1.397-1.467h3.603v-5.544a.461.461 0 0 0-.463-.461zM21.23 11h7.813a2.321 2.321 0 0 1 2.323 2.318v5.545h.98l.003-.002c1.053 0 1.911.856 1.911 1.912v14.313A1.914 1.914 0 0 1 32.35 37H21.638a1.914 1.914 0 0 1-1.912-1.914V33H16.06a2.32 2.32 0 0 1-2.321-2.32V18.906l5.779-6.124h.023z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.paste {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M24.652 23.171v13.045l9.039-.016V25.67h-2.513v-2.499zm-.84-.78h7.368l3.326 3.28v11.313L23.812 37zm-10.318-8.845h2.463c-.005.033-.01.065-.01.097v1.217c0 .678.553 1.232 1.229 1.232h8.3c.68 0 1.23-.554 1.23-1.232v-1.217c0-.032-.008-.062-.01-.097h2.462v8.362H23.2v9.322h-9.706zm7.063-1.398v1.602h1.86v-1.602zM20.073 11h2.763c.37 0 .666.345.666.77v1.103h1.972a.77.77 0 0 1 .769.77v1.216c0 .425-.348.77-.77.77h-8.297a.77.77 0 0 1-.769-.77v-1.217a.77.77 0 0 1 .769-.77h2.228V11.77c0-.423.298-.769.67-.769z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
</style>
public ActionResult MouseTrailing()
{
    return View();
}