There are a couple of things you need to adjust. First, your spans need
quotes around the title text:
data2.setFormattedValue(i, j, '<span title="'+ testText +'">' +
formattedValue + '</span>');
Then set up your tooltips in a "ready" event handler for the table, instead
of on document ready:
google.visualization.events.addListener(chart2, 'ready', function () {
$('span[title]').qtip();
});
I think the selector for your tooltips is probably going to need adjusting,
but try it out and see if it works.
On Friday, October 10, 2014 5:22:51 AM UTC-4, Mike wrote:
>
> Hi Andrew,
>
> Any help would be gratefully appreciated, thank you for your offer.
>
> The final objective for my table is that when a user hovers over a
> specific row, a tooltip is produced that will change depending on the row
> selected (which will be derived from a MYSQL query). However, I'm keeping
> it simple to begin in an attempt to get it working.
>
> My datatable is pulled from a an external query that results in a JSON
> output. Following guidance that you and another expert had included in
> other threads I included the following code:
>
> // Draw the visualization.
>
> var data2 = response.getDataTable();
>
> var chart2 = new google.visualization.Table(document.getElementById(
> 'mike_div'));
>
> //Cycle through each row and add a span and title
> for (var i = 0; i < data2.getNumberOfRows(); i++) {
> for (var j = 0; j < data2.getNumberOfColumns(); j++) {
> var formattedValue = data2.getFormattedValue(i, j);
>
> // Tooltip message. Currently show message and row number
> var testText = "This will ultimately be replaced with the
> result of a MYSQL query...but I want to walk before I run! Row - " + i;
>
> data2.setFormattedValue(i, j, '<span title='+ testText +'>' +
> formattedValue + '</span>');
>
> }
> }
>
> chart2.draw(data2, {allowHtml: true});
>
> I then have the following code to try to activate the tooltip using the
> Qtip2 library:
>
> <body>
>
> <!-- jQuery FIRST i.e. before qTip (and all other scripts too usually)
> -->
> <script type="text/javascript" src="/js/jquery.min.js"></script>
>
>
> <!-- Include either the minifed or production version, NOT both!! -->
> <script type="text/javascript" src="/js/jquery.qtip.js"></script>
>
> <script type="text/javascript">
>
>
> // Create the tooltips only when document ready
> $(document).ready(function () {
> //Set qtip for <a href's>. This works so will be used to check this
> code is working
> $('a').qtip();
>
> //Set qtip for anything with a span title...this code is likely wrong
> $('span[title]').qtip();
>
> });
>
> </script>
>
> There are two issues with this:
>
> 1 - The qtip tooltip isn't working over the table. It does work for my <a
> href> code that is outside of the google visualisation.
> 2 - As I've used "title" in the span, hovering over the row does result in
> a standard formatted tooltip, however it only displays the first word.
> Inspecting the element (see attachment) shows that the quotations marks are
> just around the first word.
>
> Kind regards,
>
> Mike
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
