search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.82k stars 406 forks source link

aria-busy with tooltip unexpected rendering #423

Closed Inveracity closed 9 months ago

Inveracity commented 10 months ago

Describe the issue

When tooltip and aria-busy are set on a button, the spinner looks funky

Current Behavior

A gif showing a button with aria-busy + tooltip and another button with aria-busy and no tooltip

output

Expected Behavior

I expected the spinner to appear inside the button

Reproduction

<main class="container">
  <section>
    <p>"busy" button with tooltip</p>
    <button aria-busy="true" data-tooltip="hello world" data-placement="bottom" />
  </section>
</main>

Environment

Pico CSS 1.5.11 Windows 10 Chrome Version 120.0.6099.130 (Official Build) (64-bit)

Thanks for making this awesome css framework

lucaslarroche commented 9 months ago

@Inveracity, I explored the problem, and it's impossible to fix, because both [data-tooltip] and [aria-busy] are using ::before. The fallback will be cleaner in the v2. [aria-busy] wins.

Inveracity commented 9 months ago

Thanks for taking a look, much appreciated. Excited for v2!

treehousekingcomic commented 2 months ago

@lucaslarroche The fallback will be cleaner in the v2. [aria-busy] wins.

This does not seem to be the case. I want aria-busy to win over data-tooltip but that isn't happening and I end up with a weird absence where neither the tooltip or loader shows. Buttons have data-tooltip by creation and when you click on one I add the aria-busy property until whatever needs to be done is complete. Currently I'm force to not use data-tooltip but is there a way to do this without the glitch?