Toolip Qtip with google chart table

I would like to display in the tooltip the contents of column 2 which is not displayed.

This is my sample:

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<script type='text/javascript'>
	google.load('visualization', '1', {packages:['table']});
	google.setOnLoadCallback(drawTable);

// start chart
function drawTable() {
	var data = new google.visualization.DataTable();

// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
	['Mike',{v: 10000, f: '$10,000'}, {v: 10, f: '$10'},true],
	['Jim', {v:8000, f: '$8,000'},{v:8, f: '$8'}, false],
	['Alice', {v: 12500, f: '$12,500'}, {v: 12, f: '$12'},true],
	['Bob', {v: 7000,f: '$7,000'},{v: 7,f: '$7'}, true],
	['Sourav',{v: 7000,f: '$9,000'},{v: 7,f: '$9'}, true],
	['Sunil', {v: 7000,f: '$16,000'}, {v: 7,f: '$16'},true],
	['Vinod', {v: 7000,f: '$19,000'}, {v: 7,f: '$19'},true]

	]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loo in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
	for (var j = 0; j < data.getNumberOfColumns(); j++) {
		var formattedValue = data.getFormattedValue(i, j);

		if(j==1){
			var y=j+1;
			var form2=data.getFormattedValue(i, y);

			console.log(i,j,formattedValue,form2);

			data.setFormattedValue(i, j, '<span title=' + '"' + formattedValue + '"' + '>' + formattedValue + '</span>');
		}
	}
}

google.visualization.events.addListener(table, 'ready', function () {

	$('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>

I can not display the content of form2 in the tooltip. I think the problem comes from the setFormatedValue method but I can not find a solution. I'm trying to set up this code as an alternative that the google chart table have no tooltip

Can someone help me?

Thanks

Solution

replace the loop with the following...

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

see following working snippet...

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<script type='text/javascript'>
	google.load('visualization', '1', {packages:['table']});
	google.setOnLoadCallback(drawTable);

// start chart
function drawTable() {
	var data = new google.visualization.DataTable();

// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
	['Mike',{v: 10000, f: '$10,000'}, {v: 10, f: '$10'},true],
	['Jim', {v:8000, f: '$8,000'},{v:8, f: '$8'}, false],
	['Alice', {v: 12500, f: '$12,500'}, {v: 12, f: '$12'},true],
	['Bob', {v: 7000,f: '$7,000'},{v: 7,f: '$7'}, true],
	['Sourav',{v: 7000,f: '$9,000'},{v: 7,f: '$9'}, true],
	['Sunil', {v: 7000,f: '$16,000'}, {v: 7,f: '$16'},true],
	['Vinod', {v: 7000,f: '$19,000'}, {v: 7,f: '$19'},true]

	]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

google.visualization.events.addListener(table, 'ready', function () {

	$('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>