How to Disable All Tooltips in an Entire Dashboard?

[aprendizlaura]

Hello everyone! Does anyone know if there's a way to remove Tooltips so that the visualizations remain static? I'm not referring to disabling the rich tooltips, but rather all tooltips that appear when hovering over a point. I'm looking to disable them for an entire dashboard, but even if there's a way to do it chart by chart, that could work as a solution. Thanks a lot!

[dosubot[bot]]

To disable all tooltips in an entire dashboard or on a chart-by-chart basis in Apache Superset, you can use the hideTooltips function provided in the superset-frontend/plugins/legacy-preset-chart-nvd3/src/utils.js file.

Disable Tooltips for the Entire Dashboard

To disable tooltips for the entire dashboard, call the hideTooltips function with the shouldRemove parameter set to true. This will remove all tooltips from the DOM.

import { hideTooltips } from 'superset-frontend/plugins/legacy-preset-chart-nvd3/src/utils';

// Call this function to remove all tooltips from the dashboard
hideTooltips(true);

Disable Tooltips on a Chart-by-Chart Basis

To disable tooltips on a specific chart, modify the chart's configuration to prevent tooltips from being generated or displayed. This typically involves setting a property in the chart's configuration to disable tooltips.

For example, if you are using a chart library that supports disabling tooltips via configuration, you might do something like this:

const chartConfig = {
  // Other chart configuration options
  tooltip: {
    enabled: false, // Disable tooltips
  },
};

// Apply this configuration to your chart instance

However, the exact method to disable tooltips on a chart-by-chart basis will depend on the specific chart library and its configuration options ^[1].

Custom CSS Approach

You can also apply custom CSS to hide tooltips in a Superset dashboard. Here is an example using the Global component from @emotion/react:

import { Global, css } from '@emotion/react';

const HideTooltips = () => (
  <Global
    styles={css`
      .ant-tooltip, .nvtooltip, .partition-tooltip {
        display: none !important;
      }
    `}
  />
);

export default HideTooltips;

Include this component in your Superset dashboard to hide all tooltips ^[2][1][3][4].

To continue talking to Dosu, mention @dosu.

[rusackas]

Is it the tooltips IN the charts, or the tooltips AROUND the charts that you want to kill? Or both? Some might be for accessibility (e.g. displaying long titles) or for errors/warnings/info.... there are lots of use cases FOR them, but I'm curious what the use case is against them.

I could add a "Show Tooltips" checkbox to all the relevant plugins in the "Customize" tab if you want to open a PR to that effect. It would just need to be True by default. Otherwise, you could add a Dashboard property and try to propagate that through to the chart options... I'm not sure how deep that rabbit hole would be. Or you could add a config/feature flag and potentially turn them off for the entire instance if you want to nuke them all. But again, the solution would largely be driven by the use case, so more details on the rationale might help here :)

[michael-s-molina]

I could add a "Show Tooltips" checkbox to all the relevant plugins in the "Customize" tab if you want to open a PR to that effect.

This could make users think that the tooltips are not working for a particular chart when interacting with it in a dashboard.

Otherwise, you could add a Dashboard property and try to propagate that through to the chart options... I'm not sure how deep that rabbit hole would be. Or you could add a config/feature flag and potentially turn them off for the entire instance if you want to nuke them all. But again, the solution would largely be driven by the use case, so more details on the rationale might help here :)

Creating a dashboard property or configuration would make sense if a strong use case for this is presented that would benefit the whole product. If this a really specific thing in your environment, I would recommend overriding the code locally to disable the tooltips.

[aprendizlaura]

Hello!! @michael-s-molina @rusackas

Thank you both for your responses. Let me explain my use case so you can better understand my need.

My idea of removing tooltips from a dashboard comes from studying how various dashboards behave on touch devices. On these devices, where we don't have a mouse to hover and trigger the tooltip, it wouldn’t be an issue if no tooltip appeared at all. However, when tapping on a data point, such as a bar in a bar chart, the tooltip appears for less than a second, then disappears as the data is filtered. I feel that, since the tooltip appears and disappears so quickly and without user control, it could be confusing or distracting, especially for users who may not fully understand it.

I’m considering this from the perspective of external users, not developers, and I’m concerned that it could hinder their experience.

I'd love to hear your thoughts on this use case.