Set tooltip for the commands in EJ2 JavaScript Toolbar control

20 Dec 20242 minutes to read

The tooltipText property of the Toolbar item is used to set the HTML Tooltip for the commands that can be viewed as hint texts on mouse hover.

To change the tooltipText to ej2-tooltip component:

  • Import the Tooltip module from ej2-popups, and initialize the Tooltip with the Toolbar target. Refer to the following code example:
ej.base.enableRipple(true);

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
width: 300,
items: [
    { text: "Cut", tooltipText: 'Cut' },
    { text: "Copy", tooltipText: 'Copy' },
    { text: "Paste", tooltipText: 'Paste' },
    { text: "Undo", tooltipText: 'Undo' },
    { text: "Redo", tooltipText: 'Redo' }
]
});

//Render initialized Toolbar component
toolbar.appendTo('#element');

 var tooltip = new ej.popups.Tooltip({
     target: '#element [title]',
 });
 tooltip.appendTo('#Tooltip');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet">
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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">
        <div id="Tooltip"><div id="element"></div></div>
        <br><br>
        <div id="result"></div>
    </div>


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