[Feature Request]: Button tooltip when focus-visible

[heybran]

Which browser are you using?

Chrome

Is your feature request related to a problem? Please describe.

Hi @Matsuuu, I was checking the React Developer Tools today, and I noticed when tab into the button, it has a tooltip displayed, which I think it'd be great for WCDT to implement that as well, to improve the accessibility.

Describe the solution you'd like

So I played a bit with CSS -- locally only at the moment -- and this is what I come up with 2 ideas in terms of CSS codes.

1) A hardcoded content on ::after element.

.tag-show-button:focus-visible::after {
    position: absolute;
    content: 'Toggle tag';
    padding: .2rem .6rem;
    background: var(--paragraph-color);
    color: #fff;
    border-radius: 4px;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

And this is what it looks like in dev tool when I tab into that button:

2) Grab button title using attr()

.tag-show-button:focus-visible::after {
    position: absolute;
    /* grab title from button title attribute */
    content: attr(title);
    padding: .2rem .6rem;
    background: var(--paragraph-color);
    color: #fff;
    border-radius: 4px;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

And this is what it looks like when I tab into that button (will adjust the styles if we're going with this solution):

Additional context

Add any other context or screenshots about the feature request here.

Questions

Would you like me to keep work on this so I can come back next time with a PR?

Also, If I missed anything, please let me know.

Brandon

[Matsuuu]

Heya !

This is a great idea and I like the minimalist approach.

Let's go forward with the 2) Grab button title using attr() -approach.

This will be a great start on the UI rework journey

[heybran]

Awesome, I will play a bit more and then send PR for your review.

[Matsuuu]

Sounds good. If you have other UI enhancenent suggestions, please list issues on them.

I will be rewriting some of the UI soon to make it more pleasing so everything helps!

[heybran]

Cool, I will definitely create issues if I have more suggestions.