How can I make the google charts tool-tip stay on click for clicking links in it

2
votes

I have a google chart with tool-tips. The tooltip text may contain some links

For tool-tip trigger , I have 2 mutually exclusive options : "selection" or "focus"

Here is an example with "focus" trigger : http://jsfiddle.net/5Y2kk/2/

      function drawVisualization() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn('number', 'Voltage (V)');
       dataTable.addColumn('number', 'Current (mA.)');
       dataTable.addColumn({role:'tooltip', type:'string','p':{html:true} });
       dataTable.addRows([
         [150, 64 , "<a href='https://www.google.com/'>https://www.google.com/</a>"],
         [160, 256 , "<a href='https://www.google.com/'>https://www.google.com/</a>"]
       ]);

         // Create and draw the visualization.
         new google.visualization.BarChart(document.getElementById('visualization')).
             draw(dataTable,
                  {title:"test",
                   width:600, height:400,
                   tooltip : {isHtml:true,trigger:'focus'}
                  }
             );
      }


      google.setOnLoadCallback(drawVisualization);

How do I get both to work at the same time ie :
1. Hover on the data point to view the values
2. Click on the data point to make it stay and then click the hyperlink inside tooltip

Ultimate objective is to trigger the tooltip on hover and still be able to click the hyperlink in tooltip before it disappears ?

1
javascriptgoogle-visualization

1 Answers

6
votes

Set the tooltip.trigger option to 'both':

tooltip: {
    isHtml: true,
    trigger: 'both'
}