Google Calendar Chart HTML Tooltip displays HTML tags as string

Question

<script type="text/javascript">
  google.charts.load("current", {{packages:["calendar"]}});
  google.charts.setOnLoadCallback(drawChart);

 function drawChart() {{
     var dataTable = new google.visualization.DataTable();
     dataTable.addColumn({{ type: 'date', id: 'Date' }});
     dataTable.addColumn({{ type: 'number', id: 'Captures' }});
     dataTable.addColumn({{'type': 'string', 'role': 'tooltip', 'p': {{'html': true}} }});
     dataTable.addRows([
        {fn:string-join($capture-dates, ",")}
      ]);

     var chart = new google.visualization.Calendar(document.getElementById('capture-dates-calendar'));

     var options = {{ 
        focusTarget: 'category',
        tooltip: {{isHtml: true}},
        trigger: 'both',
        colorAxis: {{ minValue: 1,  colors: ['#17649a', '#0b2e47'] }} 
     }};

     chart.draw(dataTable, options);
 }}
</script>

Above is the code I am using to create Google Calendar Charts in an XQuery application. All of the data is displaying correctly, but I wanted to add custom HTML to the calendar tooltips. Instead of parsing the HTML, the actual HTML tags are being displayed as a string.

Here's a screenshot of the Tooltip: https://www.flickr.com/gp/143914092@N07/M783C9

Here's how it looks in the console: [ new Date(2016,6,10),2,'<div><h3>Jul 10, 2016</h3><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>'],

Does anyone know how to force tooltips to actually parse the HTML?

Answer 1

So, I was able to get this to work in a roundabout way. The solution was to replace the escaped HTML tags before they are returned in the HTML response. I'm not sure why this works, but it does.

Here is the code:

var scriptText = html.find("#capture-dates-calendar").text().replace(/&lt;/g, "<").replace(/&gt;/g, ">");
html.find("#capture-dates-calendar").text(scriptText);