Javascript 谷歌表格可视化的工具提示Html

我想在一个包含隐藏的第2、3、4列数据的结构上显示HTML格式的工具提示

当我在手机上进行onmouseover时，我无法让addeventlistener工作

我希望在将鼠标移到“number”（第1列）列上时触发工具提示

div.google-visualization-tooltip{
宽度：自动；
高度：自动；
背景色：红色；
颜色：#000000；
文本对齐：居中；
垂直对齐：中间对齐；
}
load（'visualization'，'1'，{packages:['table']}）；
setOnLoadCallback（drawTable，）；
//起始图表
函数drawTable（）{
var data=new google.visualization.DataTable（）；
//添加列
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'number'）；
data.addColumn（'number'，'ok'）；
data.addColumn（'number'，'warnning'）；
data.addColumn（'number'，'nok'）；
//添加数据
data.addRows([
[Mike'，18,10,3,5]，
[Jim'，8,5,2,1]，
[Alice'，12,6,3,3]，
[Bob'，7,2,4,1]，
[Sourav'，9,1,0,8]，
[Sunil'，16,15,0,1]，
[Vinod'，19,14,4,1]
]);
var table=新的google.visualization.table（document.getElementById（'table_div'）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1]）；
table.draw（视图，{allowtml:true}）；
google.visualization.events.addListener（表'onmouseover'，函数（e）{
setToolTiContent（数据，如行）；
});
}
//设置工具提示
函数setTooltipContent（数据，行）{
如果（行！=null）{
var content='OKwarnnigNOK'+data.getValue（第2行）+'+data.getValue（第3行）+'+data.getValue（第4行）+'；//生成工具提示内容
var tooltip=document.getElementsByClassName（“谷歌可视化工具提示”）[0]；
tooltip.innerHTML=内容；
}
}

表格图表仅发布以下内容

“选择”、“页面”、“排序”、“准备就绪”

此外，表格图表中不存在

google可视化工具提示
的容器

要获得所需的结果，我们可以等待图表的
'ready'
事件

然后在表的容器上侦听鼠标悬停事件


至于
谷歌可视化工具提示
，我们只需添加我们自己的

请参阅以下工作片段


google.charts.load（'current'，{packages:['table']}）；
google.charts.setOnLoadCallback（drawTable）；
//起始图表
函数drawTable（）{
var data=new google.visualization.DataTable（）；
//添加列
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'number'）；
data.addColumn（'number'，'ok'）；
data.addColumn（'number'，'warnning'）；
data.addColumn（'number'，'nok'）；
//添加数据
data.addRows([
[Mike'，18,10,3,5]，
[Jim'，8,5,2,1]，
[Alice'，12,6,3,3]，
[Bob'，7,2,4,1]，
[Sourav'，9,1,0,8]，
[Sunil'，16,15,0,1]，
[Vinod'，19,14,4,1]
]);
var container=document.getElementById（'table_div'）；
var table=新的google.visualization.table（容器）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1]）；
google.visualization.events.addListener（表'ready'，function（）{
container.addEventListener（'mouseover'，函数（e）{
SetToolTiContent（数据，e）；
});
container.addEventListener（'mouseout'，函数（e）{
SetToolTiContent（数据，e）；
});
});
table.draw（视图，{allowtml:true}）；
}
//设置工具提示
函数setTooltipContent（数据，e）{
var col=null；
var行=null；
var tooltip=document.getElementsByClassName（“谷歌可视化工具提示”）[0]；
如果（e.type==='mouseover'）{
如果（e.target.tagName=='TD'）{
col=（e.target.cellIndex）；
行=（e.target.parentNode.rowIndex-1）；
}
如果（（行！==null）&&（列==1））{
var content='OKwarnnigNOK'+data.getValue（第2行）+'+data.getValue（第3行）+'+data.getValue（第4行）+'；//生成工具提示内容
tooltip.innerHTML=内容；
tooltip.style.display='block'；
tooltip.style.left=（e.pageX+16）+“px”；
tooltip.style.top=（e.pageY+16）+“px”；
}否则{
tooltip.style.display='none'；
}
}否则{
tooltip.style.display='none'；
}
}
div.google-visualization-tooltip{
显示：无；
位置：绝对位置；
宽度：自动；
高度：自动；
背景色：红色；
颜色：#000000；
文本对齐：居中；
垂直对齐：中间对齐；
}
现在感谢您的回答，如果我希望工具提示仅显示“数字”列中的单元格，我该怎么办？我想我得画一个圈？在最后一个项目中，我有几个列，我希望工具提示显示鼠标在其中花费的列的详细信息。