The tooltip of Country Map is not readable

[xavier-GitHub76]

Screenshot

The tooltip is OK on World Map :

The tooltip follows the position of mouse

and background color is used. The value is readeable

It is not the same for Country Map

Best regards

[dosubot]

To address the readability issue of tooltips in your Country Map visualization, consider implementing these targeted improvements:

1. Customize Tooltip Styles: Adjust the tooltip's CSS to enhance contrast and readability. Use a light background (#fff), dark text (#000), and ensure the font size is clear (14px). Style the tooltip to be slightly transparent (opacity: 0.9) and follow the cursor without blocking it (pointer-events: none).

2. Dynamic Tooltip Positioning: Make sure the tooltip dynamically adjusts its position based on the mouse coordinates. This prevents it from obscuring important parts of the map or UI elements.

3. Enhance Tooltip Content and Formatting: Dynamically generate tooltips with concise, well-formatted content. Include the country name and metric value, ensuring the text contrasts well with the background for better readability.

4. Interactive Tooltips for Enhanced Readability: For complex data, consider making tooltips interactive, allowing users to click or hover over the tooltip itself for more interaction.

5. Accessibility Considerations: Ensure tooltips are accessible by adding aria attributes and enabling keyboard navigation.

6. Leverage D3.js Features: Use D3.js to dynamically update tooltip content and style based on the data of the hovered map region.

7. Adopt Theme Consistency: Align the tooltip's styling with the map's overall theme for a cohesive look and feel.

By focusing on these enhancements, you can significantly improve the user experience and readability of tooltips in your choropleth country map visualizations.

Details

Sources

• superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
• superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.js
• superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx
• superset-frontend/plugins/legacy-preset-chart-nvd3/src/utils.js
• superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts
• superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.css
• superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts
• superset/viz.py

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[rusackas]

Yes, I was just noticing this a couple days ago... I'm not sure when it regressed, but I believe the name should be located at the centroid of the region you're hovering on. I'm not sure how far back this happened, but a git bisect would likely turn up the problem, if anyone doesn't see it immediately in the code.

The position and the legibility are somewhat separate issues... I'm more worried about the position, but both are valid. Should we split these into two issues? Do you have interest in tackling either?

@michael-s-molina just merged a new tooltip renderer that we'd like to start standardizing on... perhaps this is a good chance to spiff things up a little bit while we're at it?

[xavier-GitHub76]

Thank you for your feedback, I personally see no point in splitting the subject into 2 because for me it forms a whole.
I understand that corrections can be effective on one subject or another.
If you would like me to troubleshoot to make this easier to fix, I can do that.
Sincerely

[rusackas]

If you would like me to troubleshoot to make this easier to fix, I can do that.

That would be amazing! Many of us are stretched for time, so any help we can get goes a long, long way. A PR would be the dream, but more diagnostics sure help!