My requirement is, I would like to achieve the tooltip with all the styling & transition effects. Please help me to achieve this in my observable hq notebook.
I managed to build the plot, however i do not know how to customise the tooltip with all the styling & transition effects.
As you can see, the tip is being added as a g element within an SVG. I’ve realized that we can’t apply the same CSS styling to an SVG element as we would to a div or p element.
However, I was able to change the background color of the g element using the fill attribute.
Nevertheless, I’m struggling to apply additional CSS styling, such as padding, backdrop filter blur, or smooth transitions.
I understand that SVG elements have their own set of rules and limitations when it comes to styling.
I’m hoping to find a workaround to achieve the desired effect. If you have any suggestions or ideas, please share! I’d appreciate any guidance on how to overcome these limitations.
