Tool tip in EJ2 JavaScript Progressbar control
10 May 20239 minutes to read
The tooltip for the progress bar is used to represent the progress value. During the initial load, it can be enabled by using the enable
property. The showTooltipOnHover
property can show the tooltip on mouseover.
var linearProgress1 = new ej.progressbar.ProgressBar({
type: 'Linear',
height: '60',
value: 100,
animation: {
enable: true,
duration: 2000,
delay: 0,
},
tooltip:{
enable: true
}
});
linearProgress1.appendTo('#lineardeterminate');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toast</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="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/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 class="row linear-parent">
<div id="lineardeterminate" class="linear-progress"></div>
<div id="linearindeterminate" class="linear-progress"></div>
<div id="linearbuffer" class="linear-progress"></div>
<div id="linearsegment" class="linear-progress"></div>
</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>
Format
By default, the tooltip shows information about progress. In addition to that, show more information in the tooltip using the format
property.
var linearProgress1 = new ej.progressbar.ProgressBar({
type: 'Linear',
height: '60',
value: 100,
animation: {
enable: true,
duration: 2000,
delay: 0,
},
tooltip:{
enable: true,
format: "Progress: ${value}"
}
});
linearProgress1.appendTo('#lineardeterminate');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toast</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="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/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 class="row linear-parent">
<div id="lineardeterminate" class="linear-progress"></div>
<div id="linearindeterminate" class="linear-progress"></div>
<div id="linearbuffer" class="linear-progress"></div>
<div id="linearsegment" class="linear-progress"></div>
</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>
Customization
The fill
and border
properties are used to customize the background color and border of the tooltip respectively. The textStyle
property in the tooltip is used to customize the font of the tooltip text.
var linearProgress1 = new ej.progressbar.ProgressBar({
type: 'Linear',
height: '60',
value: 100,
animation: {
enable: true,
duration: 2000,
delay: 0,
},
tooltip:{
enable: true,
format: "Progress: ${value}"
},
textStyle: {
fontWeight: '900',
size: '15px',
color: 'red',
fontFamily: 'Roboto',
fontStyle: 'Italic'
}
});
linearProgress1.appendTo('#lineardeterminate');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toast</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="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/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 class="row linear-parent">
<div id="lineardeterminate" class="linear-progress"></div>
<div id="linearindeterminate" class="linear-progress"></div>
<div id="linearbuffer" class="linear-progress"></div>
<div id="linearsegment" class="linear-progress"></div>
</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>