Feature Request: Customizable Tooltip Styling

Feedback
1

Feature Request: Customizable Tooltip Styling

Dear Observablehq Team,

I hope this message finds you well. I am excited to share a feature request that I believe will enhance the user experience on your platform. I am writing to request the ability to customize the styling of the basic tooltip using CSS styles.

Currently, the basic tooltip (as shown in the attached image) basic tooltip provides essential functionality, but limited visual customization options.

Inspired by Mike Freeman’s custom tooltip notebook, I created my own custom tooltip to get glossy bg, in addition to highlight content and apply styles. You can view my implementation here: Plot Tooltip / WS-Dheeraj | Observable.

While I was able to achieve some styling and transition effects, I believe that allowing users to customize the existing Observable plot tooltip would provide a more seamless and polished experience.

Specifically, I would like to request the ability to:

  • Customize the tooltip background using CSS styles,
  • Apply transition effects for smoother movement,
  • Highlight content using CSS styles.

I believe that this feature would align with your platform’s commitment to providing a flexible and user-friendly environment. I would be grateful if you could consider this request.

Thank you for your time and dedication to creating an exceptional product. I look forward to your response.

Best regards,
Big fan of Observablehq products.

1 Like
2

Hello, ObservableHQ Team,

I am excited to share an update on the feature request I initially submitted. I have successfully implemented a tooltip feature for plots, building upon Mike Freeman’s excellent work. Please refer to his implementation as depicted here:

Mike Freeman’s tooltip:

Screen Recording 2024-08-07 144039

Building up on Mike Freeman’s tooltip:

I have built upon his code and added several features. Please refer to the following GIFs showcasing my contributions:

Please refer to the below gif’s,

  1. Styling the tip and also gathering the color info:

    Screen Recording 2024-08-07 144520

  2. Also, I have added ability to hover over legend to highlight the corresponding element. Please refer to the below gif:

    Screen Recording 2024-08-07 145007

  3. I have also added the ability to let users customize the tooltip using CSS properties. Please see the below gif:

    Screen Recording 2024-08-07 145334

I would like to extend my gratitude to Mike Freeman for his inspiration and code. [ Mike Freeman’s tooltip ].

My next goals are to implement two additional features:

  1. Onclick to freeze the tooltip

  2. Snap the pointer to the nearest path, particularly useful for line plots

I came across Fill’s work in the [Experimental Plot tooltip 0.1 ]. However, I’m having a hard time wrapping my mind around Fill’s code—it’s just too complex for me to fill my brain with!

Please go through this notebook to identify potential improvements. [ Plot Tooltip v2 / WS-Dheeraj ]

Thank you for your time, and I look forward to your feedback.

Thank you.
Have a great day!.