Create Bootstrap Popover content based on a javascript value -

i'm using justgage , bootstrap , want display variable content in popover based on value in javascript justgage.

for example, if value in gauge between 0 - 50, "try harder", if it's between 50 - 200, "well done", surfaced in popover content. - (you can see clicking on gauge 1).

    $(window).load(function() {          var gagevalue1 = getrandomint(0, 200)        var gagevalue2 = getrandomint(0, 200)        var gagevalue3 = getrandomint(0, 200)        var colorgradientryg = ["#991d1d", "#9d1f1f", "#a22222", "#a62424", "#ab2727", "#b02929", "#b42c2c", "#b92e2e", "#be3131", "#c23333", "#c73636", "#cc3939", "#ce4236", "#d14b33", "#d35530", "#d65e2d", "#d8672a", "#db7127", "#dd7a24", "#e08321", "#e28d1e", "#e5961b", "#e8a019", "#e9a619", "#ebad1a", "#ecb41a", "#eebb1b", "#f0c21c", "#f1c81c", "#f3cf1d", "#f5d61e", "#f6dd1e", "#f8e41f", "#faeb20", "#f4eb25", "#eeeb2b", "#e9ec31", "#e3ec36", "#deec3c", "#d8ed42", "#d3ed48", "#cded4d", "#c8ee53", "#c2ee59", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bbed5c", "#b9ec59", "#b8ea56", "#b6e954", "#b4e851", "#b3e64e", "#b1e54b", "#afe449", "#aee246", "#ace143", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#aae03e", "#a9e03c", "#a8e03a", "#a8e037", "#a7e035", "#a6e033", "#a5e031", "#a5e02e", "#a4e02c", "#a3e02a", "#a3e028", "#a4e224", "#a5e520", "#a6e81d", "#a7eb19", "#a8ee15", "#a9f012", "#aaf30e", "#abf60a", "#acf907", "#adfc03", "#aeff00"]        var g1 = new justgage({          id: "g1",          title: "gage 1",          value: 92,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });        var g2 = new justgage({          id: "g2",          title: "gage 2",          value: 98,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });        var g3 = new justgage({          id: "g3",          title: "gage 3",          value: 77,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });          $(document).ready(function() {          $('#g1_refresh').bind('click', function() {            g1.refresh(getrandomint(0, 200));            g2.refresh(getrandomint(0, 200));            g3.refresh(getrandomint(0, 200));            return false;          });        });      });          $(document).ready(function() {        $('[data-toggle="popover"]').popover();      });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>        <script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>    <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>    <h3>how doing?</h3>    <div class="row-fluid">    <div class="span4">      <a class="tipspopover" title="tips" data-toggle="popover" data-placement="bottom" text-align="center" data-content="this content including helpful tip on how improve, based on value given.">        <div id="g1">        </div>      </a>      </div>    <div class="span4">      <div id="g2"></div>    </div>    <div class="span4">      <div id="g3"></div>    </div>  </div>

here's have far... https://jsfiddle.net/e4v62nh6/1/

it seems value of initialised justgauge can found @ xpath
//*[@id="someid"]/svg/text[2]/tspan - can create popovers in single loop :

$("svg").each(function() {     var value = +this.queryselector('text:nth-of-type(2)')                      .queryselector('tspan')                      .textcontent;                   function getcontent() {         if (value<20) return "dont quit dayjob"         if (value<40) return "try harder"         if (value<60) return "room improvement"         if (value<80) return "you passed test"         return "well done"     }          $(this).popover({       trigger : 'hover',         placement : 'top',        content : getcontent()     });     }); 

forked fiddle -> https://jsfiddle.net/0zdtkz2a/