There's a plenty of libraries (mostly JavaScript) to enable the classic tooltip design pattern. But let's build our own! And let's not pollute our ...
For further actions, you may consider blocking this person and/or reporting abuse
Sadly these are not accessible, although I am glad you did at least consider people with disabilities so you get a big ❤ from me!
Firstly you have a big error with your
ariausage I am afraid.If you set the
aria-labelon something then that is what is read out, it effectively cancels out the content inside.So
<span data-tooltip="right 100" aria-label="Brown fox">Right</span>will actually read out "Brown Fox" not "Right, Brown Fox" as intended.Also keyboard users (people with mobility impairments being a prime example) have no way of accessing your tooltip content as it is not focusable.
Finally anyone who use a screen magnifier will struggle using your tooltip as you have to have the mouse positioned over the original text for it to work and they may need to move their cursor over the tooltip itself if they have a particularly high zoom level, at which point it becomes invisible again.
You may find this answer I gave on stack overflow helpful, but sadly we have to use JS in my implementation. With a slight adjustment the concept could be used for a tooltip.
Things to Consider
There are a few things to consider here: