Create and show tooltip on multiple targets in EJ2 TypeScript 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.
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

let button1: Button = new Button();
button1.appendTo('#sample');
let button2: Button = new Button();
button2.appendTo('#clear');
let tooltip1: Tooltip = new Tooltip({
   position: 'RightCenter'
});
tooltip1.appendTo('#uname');
let tooltip2: Tooltip = new Tooltip({
   position: 'RightCenter'
});
tooltip2.appendTo('#mail');
let tooltip3: Tooltip = new Tooltip({
   position: 'RightCenter'
});
tooltip3.appendTo('#pwd');
let tooltip4: Tooltip = new Tooltip({
   position: 'RightCenter'
});
tooltip4.appendTo('#cpwd');
let uname = document.getElementById('uname');
let pwd = document.getElementById('pwd');
let 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id='loader'>Loading....</div>
  <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>
  <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%;
  }