search

color-js / elements

WIP
12 stars 1 forks source link

[color-chart] Place the Y-axis underneath a tooltip with the value #104

Open DmitrySharabin opened 2 months ago

DmitrySharabin commented 2 months ago

...when the chart container is hovered.

I tried another approach, but I couldn't get the shadow DOM boundaries to style the axis based on the state of an element in the light DOM. I also tried creating a new stacking context for the tooltip with isolation: isolate without luck.

Without the fix, we might end up with the following:

SCR-20240618-kukd

With the fix, we have this:

SCR-20240618-kvay
netlify[bot] commented 2 months ago

Deploy Preview for color-elements ready!

Name Link
Latest commit cb5a819b886150ab30fa0507e4bcee3c470499e3
Latest deploy log https://app.netlify.com/sites/color-elements/deploys/66715bec7c78c500087124a9
Deploy Preview https://deploy-preview-104--color-elements.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

DmitrySharabin commented 2 months ago

I would avoid z-index: -1 as it can end up making the element be hidden behind containers.

Yes, this bothers me, too.

What about applying z-index: 1 to the color scales?

We already do it, unfortunately, with no effect.

https://github.com/color-js/elements/blob/0661aa7a74dd129dd103968eefc89296001c98c2/src/color-chart/color-chart-global.css#L51

Moreover, the tooltip itself has a z-index set:

https://github.com/color-js/elements/blob/0661aa7a74dd129dd103968eefc89296001c98c2/src/color-chart/color-chart-global.css#L68

I tried changing both of them. No effect.

I'll try to find some other options, then.