如何禁用Google Gantt Chart的tooltips工具提示

Google Gantt Chart 未适配通用的图表交互配置项，你试过的tooltip: { trigger: 'none' }、enableInteractivity: false以及基础CSS隐藏方案对它无效是正常情况，可采用以下几种可行方案实现禁用效果：

• 高优先级CSS强制隐藏
  如果需要最简单的实现方案，直接使用更高权重的CSS规则覆盖即可，注意不要在带scoped限制的样式块中添加该规则：

div.google-visualization-tooltip {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* 同时可添加以下规则隐藏任务条悬浮高亮效果 */
div.google-visualization-gantt .google-visualization-gantt-bar-hover {
    display: none !important;
}

• 事件拦截彻底禁用
  如果出现CSS方案偶尔闪现tooltip的问题，可以通过拦截图表容器的鼠标事件从根源阻止tooltip生成：

google.charts.load('current', {'packages':['gantt']})
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 数据初始化逻辑
  const data = new google.visualization.DataTable()
  // ... 你的列、数据定义代码
  const container = document.getElementById('你的甘特图容器ID');
  const chart = new google.visualization.Gantt(container);

  // 捕获阶段拦截鼠标悬浮事件，阻止tooltip触发逻辑
  container.addEventListener('mouseover', e => e.stopImmediatePropagation(), true);

  chart.draw(data, {});
}

• 保留交互仅隐藏tooltip内容
  如果你需要保留甘特图的其他交互能力，仅不需要tooltip显示，可以自定义空的tooltip列：

const data = new google.visualization.DataTable();
// 原有列定义保持不变
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
// 新增空内容的tooltip角色列
data.addColumn({type: 'string', role: 'tooltip'});

// 新增行时，最后一位参数传入空字符串即可
data.addRow(['t1', '示例任务', new Date(2024,0,1), new Date(2024,0,7), null, 50, null, '']);

内容的提问来源于stack exchange，提问作者Corrl