如何在移动设备及小屏幕上禁用Chart.js提示框？

Hey there! I get it—having multiple data points cluttering up tooltips when clicking your chart on mobile or small screens is super frustrating. Let's break down why your initial setup didn't work and fix this properly.

Why Your First Attempt Failed #

The options: { events: ['click'] } setting you tried only restricts the chart from responding to non-click events (like mousemove), but it doesn't actually disable the tooltip itself. Even with this config, clicking the chart will still trigger the tooltip—you just won't see it on hover. That's why it didn't solve your problem of overlapping tooltip content on small screens.

Solution 1: Dynamic Tooltip Enabling Based on Screen Size #

The right approach is to conditionally toggle tooltip visibility based on viewport width. Most modern chart libraries (like Chart.js, the most common choice for this scenario) support responsive configurations for this exact use case.

Here's how to set it up:

const chart = new Chart(ctx, {
  type: 'your-chart-type', // e.g., 'line', 'scatter'
  data: yourChartData,
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        // Enable tooltip only on screens larger than 768px (adjust this threshold to match your needs)
        enabled: window.innerWidth > 768,
        // For more flexibility, use a callback function instead:
        // enabled: () => window.innerWidth > 768
      }
    }
  }
});

Solution 2: Update Tooltip State on Window Resize #

To ensure the tooltip adapts if the user resizes their browser window, add a resize event listener to update the chart dynamically:

window.addEventListener('resize', () => {
  const isSmallScreen = window.innerWidth <= 768;
  // Flip tooltip enabled state based on screen size
  chart.options.plugins.tooltip.enabled = !isSmallScreen;
  // Apply the new setting immediately
  chart.update();
});

Bonus: Alternative Fix (If You Want to Keep Tooltips) #

If you ever change your mind and prefer to keep tooltips instead of disabling them, you can configure the tooltip to group overlapping data points. For Chart.js, this looks like:

plugins: {
  tooltip: {
    mode: 'index',
    intersect: false,
    // Add custom logic to merge labels for overlapping points if needed
    callbacks: {
      label: (context) => `${context.dataset.label}: ${context.parsed.y}`
    }
  }
}

But since you mentioned disabling tooltips on small screens is your preferred solution, the first two methods should resolve your issue perfectly.

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