Skip to content
This repository was archived by the owner on Apr 18, 2026. It is now read-only.
This repository was archived by the owner on Apr 18, 2026. It is now read-only.

Cannot disable tooltips on Gantt Chart #3021

Description

@william-blane-west

Goal: We are trying to completely disable the hover tooltips on a Google Gantt Chart.

Problem: Despite trying multiple methods, the tooltips continue to appear. The expected behavior is that no tooltip should be visible on hover.

Methods Attempted:

Setting the chart option tooltip: { trigger: 'none' }.

Overriding the tooltip with an empty HTML tooltip column.

Using a MutationObserver to remove the tooltip element from the DOM.

Injecting CSS to hide the .google-visualization-tooltip element, both statically and dynamically using the chart's ready event.

Minimal, Reproducible Example (from Gemini 2.5 Pro in my browser):

<title>Google Gantt Chart - No Tooltips</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Gantt chart package google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  // Create a new DataTable instance
  var data = new google.visualization.DataTable();

  // Define the columns for the DataTable
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  // Add the data rows for the chart
  data.addRows([
    ['2024Spring', 'Spring Campaign', 'Marketing',
     new Date(2024, 2, 22), new Date(2024, 5, 20), null, 100, null],
    ['2024Summer', 'Summer Sale', 'Sales',
     new Date(2024, 5, 21), new Date(2024, 8, 20), null, 100, null],
    ['2024Autumn', 'Autumn Collection', 'Creative',
     new Date(2024, 8, 21), new Date(2024, 11, 20), null, 75, null],
    ['2024Winter', 'Winter Promotion', 'Marketing',
     new Date(2024, 11, 21), new Date(2025, 2, 21), null, 50, null],
    ['2025Spring', 'Next Year Planning', 'Management',
     new Date(2025, 2, 22), new Date(2025, 5, 20), null, 10, null],
    ['Testing', 'QA Testing', 'QA',
     new Date(2024, 8, 1), new Date(2024, 10, 15), null, 90, '2024Autumn'],
    ['Launch', 'Product Launch', 'All',
     new Date(2025, 0, 1), new Date(2025, 1, 1), null, 0, '2024Winter']
  ]);

  // Define the chart options
  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  // Create a new Gantt chart instance
  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  // **FIX:** Use the 'ready' event listener to inject the CSS after the chart is drawn.
  // This ensures our style rule is the last one applied.
  google.visualization.events.addListener(chart, 'ready', function () {
    var style = document.createElement('style');
    style.type = 'text/css';
    // This aggressive CSS rule should hide the tooltip.
    style.innerHTML = "div[class*='google-visualization-tooltip'] { display: none !important; }";
    document.head.appendChild(style);
  });

  // Draw the chart
  chart.draw(data, options);
}
</script> <style> body { font-family: 'Inter', sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #chart_container { width: 90%; max-width: 1200px; padding: 2rem; background-color: white; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; margin-bottom: 2rem; } /* The previous CSS rule has been removed from here and is now injected by JavaScript */ </style>

Google Gantt Chart (Tooltips Disabled)

Environment:
Microsoft Windows 10 Pro ver. 10.0.19045 Build 19045
Internet Information Services (Version 10.0.19041.1)
Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.14.8
.NET 7.0
Google Charts is loaded dynamically from the official CDN using the following URL: https://www.gstatic.com/charts/loader.js

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions