Apache Superset Treemap tooltip css - Aurora Blog|java/go/python

I create treemap chart. I found text appears cramped in the hover tooltip. How can I make it more beautiful?

Comment From: dosubot[bot]

You can make Treemap tooltips in Superset look better by adding custom CSS to your dashboard. The tooltips use the .echarts-tooltip class, so you can target that in the dashboard’s custom CSS editor. For example:

.echarts-tooltip {
  padding: 12px 18px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  background: #fff !important;
  color: #222 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  max-width: 320px !important;
  word-break: break-word !important;
}

You can adjust these values to fit your style. If your changes don’t show up, check for CSS syntax errors, use !important for overrides, and make sure your CSS loads after the default styles. For more tips, see the official guide on customizing Superset dashboards with CSS and discussion of common pitfalls.

This approach works for all ECharts-based charts in Superset, including Treemap tooltips.

To reply, just mention @dosu.

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

Comment From: mlzxdzl

@dosu I add the css, it still cramped

Comment From: dosubot[bot]

The cramped look in Treemap tooltips comes from inline styles (like max-width: 300px, overflow: hidden, and text-overflow: ellipsis) that Superset injects directly into the tooltip HTML, not from global CSS classes. This means dashboard-level CSS (even with !important) can only change the outer container (like background or border), but can't affect the inner padding, text wrapping, or cell sizing that make the tooltip feel cramped details.

If you want to experiment, you can try increasing the .echarts-tooltip max-width or use browser dev tools to see if any tweaks help, but most of the layout is locked by those inline styles. To really improve the tooltip layout (like more padding or better text wrapping), it would require changes in the Superset codebase, specifically in the tooltip HTML generation for Treemap charts reference.

Let me know if you want pointers on where in the code this lives or ideas for a custom build!

To reply, just mention @dosu.

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}