bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

How to Display the Value on Tooltip #191

Open ironhide0396 opened 6 years ago

ironhide0396 commented 6 years ago

Is the value on tooltip shown by default or is there any other method to display it I tried using the default usage options but the value is not being shown anywhere. Need Help over it.

Thanks!

ironhide0396 commented 6 years ago

I read the wiki present to display the value but i want the value to be displayed on the tool tip end.

dhunt84971 commented 5 years ago

I may be misunderstanding your need, but I think you can get this effect by setting the title property of the canvas to the gauge.value. See the last line in the code below:

function showGauges(){
    // Gauge 1
    var target = document.getElementById('gauge1'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts1); 
    gauge.maxValue = 450; // set max gauge value
    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 1; // set animation speed (32 is default value)
    gauge.set(300); // set actual value
    target.title = gauge.value;
});

This is the result (small 300 with black background is the tooltip that appears when the mouse is moved anywhere over the canvas used to display the gauge.

https://drive.google.com/open?id=1ef3t9atbdbFqhMI8rhbiy1PFsE1FFeuQ

Hope this helps!