JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Tooltip in JavaScript (ES5) ProgressBar control

06 Jun 2023 / 2 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.

Source
Preview
index.js
index.html
Copied to clipboard
var linearProgress1 = new ej.progressbar.ProgressBar({
    type: 'Linear',
    height: '200',
    value: 70,
    animation: {
      enable: true,
      duration: 2000,
      delay: 0,
    },
    tooltip:{
        enable: true
    }
  });
  linearProgress1.appendTo('#lineardeterminate');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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.

Source
Preview
index.js
index.html
Copied to clipboard
var linearProgress1 = new ej.progressbar.ProgressBar({
    type: 'Linear',
    height: '200',
    value: 70,
    animation: {
      enable: true,
      duration: 2000,
      delay: 0,
    },
    tooltip:{
        enable: true,
        format: "Progress: ${value}"
    }
  });
  linearProgress1.appendTo('#lineardeterminate');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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.

Source
Preview
index.js
index.html
Copied to clipboard
var linearProgress1 = new ej.progressbar.ProgressBar({
    type: 'Linear',
    height: '200',
    value: 70,
    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');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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>
Previous
Next