google visualization "p Property" supported attributes - google-visualization

Question

I want to make the value ("v") appear on rollover using the standard HTML title attribute (among placing other attributes for other purposes).
The visualization docs say this can be done via the "p Property". However, from my code below ONLY className get rendered as an attribute in the td tags.
Given the "style" attribute is an example directly copied from the documentation - https://developers.google.com/chart/interactive/docs/reference#cell_object, I assume i'm doing something wrong. Can you see what it might be?
Cell Object:
{
"v": "\/?s=mi+shampoo+adecuado?&submit=Buscar",
"f": "\/?s=m...uscar",
"p": {
"title": "\/?s=mi+shampoo+adecuado?&submit=Buscar",
"style": "border: 1px solid green;",
"className": "randomCls",
"data-title": "\/?s=mi+shampoo+adecuado?&submit=Buscar"
}
},
visualization code
var table = new google.visualization.DataTable();
for(var j=0; j < data[0].length; j++) {
table.addColumn(typeof data[1][j].v,data[0][j]);
}
data.shift();
table.addRows(data);
var ac = new google.visualization.Table(graph.get(0)); // AreaChart
ac.draw(table, {
backgroundColor: {fill:'#d4d4d4'},
colors : ["#999999",'#004087']
});

Answer 1

The Table visualization only supports "className" and "style" properties for cells. If you need to apply additional HTML properties to cells, you will have to write custom code to parse the <table> element created by the visualization and add the properties to <td> elements manually. If you can put the properties on the cell contents instead of the <td> elements, you can set the formatted values of the cells to contain whatever HTML you need.

Answer 2

Thank you #asgallant for clarification on the supported attributes. So, here's the code accordingly:
var wrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataTable: table,
options: {backgroundColor: {fill:'#d4d4d4'}, colors : ["#999999",'#004087'], allowHtml:true},
containerId: 'widget'+wid
});
google.visualization.events.addListener(wrapper, 'ready', function() {
graph.find(".tipFlag").each(function(){
var v = $(this).attr("class").substring("tipFlag ".length);
$(this).attr("title", v);
});
});
wrapper.draw();
where the new cell objects look like:
{
"v": "\/?s=mi+shampoo+adecuado?&submit=Buscar",
"f": "\/?s=m...uscar",
"p": {
"className": "tipFlag \/?s=mi+shampoo+adecuado?&submit=Buscar",
}
},