Code Monkey home page Code Monkey logo

Comments (4)

dosubot avatar dosubot commented on June 21, 2024 2

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


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.

from superset.

rusackas avatar rusackas commented on June 21, 2024

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?

from superset.

xavier-GitHub76 avatar xavier-GitHub76 commented on June 21, 2024

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

from superset.

rusackas avatar rusackas commented on June 21, 2024

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!

from superset.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.