Create and show tooltip on multiple targets in EJ2 JavaScript Tooltip control

10 Mar 20259 minutes to read

Tooltips can be created and shown on multiple targets within a container by defining specific target elements using the target property. This ensures that the Tooltip is initialized only on matched targets within the container.

In this implementation, the Tooltip content is assigned from the title attribute of the target element.

import { Tooltip } from '@syncfusion/ej2-popups';

let tooltip: Tooltip = new Tooltip({
    position: 'RightCenter'
});
tooltip.appendTo('#uname'); // Here we have appended the Tooltip to the element.
var button1 = new ej.buttons.Button();
button1.appendTo('#sample');
var button2 = new ej.buttons.Button();
button2.appendTo('#clear');
var tooltip1 = new ej.popups.Tooltip({
   position: 'RightCenter'
});
tooltip1.appendTo('#uname');
var tooltip2 = new ej.popups.Tooltip({
   position: 'RightCenter'
});
tooltip2.appendTo('#mail');
var tooltip3 = new ej.popups.Tooltip({
   position: 'RightCenter'
});
tooltip3.appendTo('#pwd');
var tooltip4 = new ej.popups.Tooltip({
   position: 'RightCenter'
});
tooltip4.appendTo('#cpwd');

var uname = document.getElementById('uname');
var pwd = document.getElementById('pwd');
var cpwd = document.getElementById('cpwd');
document.getElementById('sample').addEventListener('click', function () {
   if ((uname.value.length > 0) & (uname.value.length < 4)) {
      uname.title = 'Required Minimum 4 Characters';
      uname.style.backgroundColor = 'red';
      tooltip1.open(uname);
   } else {
      uname.style.backgroundColor = 'white';
   }
   if (pwd !== '' && pwd.value.length < 8) {
      pwd.title = 'Required Minimum 8 Characters';
      pwd.style.backgroundColor = 'red';
      tooltip3.open(pwd);
   } else {
      pwd.style.backgroundColor = 'white';
   }
   if (
      uname.value.length >= 4 &&
      pwd !== '' &&
      pwd.value.length >= 8 &&
      pwd == cpwd.value
   ) {
      alert('Form Submitted');
   } else {
      alert('Details are not Valid');
   }
});
document.getElementById('clear').addEventListener('click', function () {
   uname.style.backgroundColor = 'white';
   pwd.style.backgroundColor = 'white';
   tooltip1.close(uname);
   uname.title = 'Please enter your name';
   tooltip3.close(pwd);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Tooltip</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript UI Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="container">
    <form id="details" role="form">
      <div id="user">
        <div class="info">User Name:</div>
        <div class="inputs"><input type="text" id="uname" class="e-info e-input" name="firstname"
            title="Please enter your name"></div>
      </div>
      <br>
      <div>
        <div class="info">Email Address:</div>
        <div class="inputs"><input type="text" id="mail" class="e-info e-input" name="email"
            title="Enter a valid email address"></div>
      </div>
      <br>
      <div>
        <div class="info">Password:</div>
        <div class="inputs"><input id="pwd" type="password" class="e-info e-input" name="password"
            title="Be at least 8 characters length"></div>
      </div>
      <br>
      <div>
        <div class="info">Confirm Password:</div>
        <div class="inputs"><input id="cpwd" type="password" class="e-info e-input" name="Cpwd"
            title="Re-enter your password"></div>
      </div>
      <br>
      <div class="btn">
        <input id="sample" type="button" value="Submit">
        <input id="clear" type="reset" value="Reset">
      </div>
    </form>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></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>
</body>

</html>
#container {
    visibility: hidden;
    border: 1px solid #ddd;
  }

  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }