5 ms·
The solution in the post is 4 lines: <button aria-labelledby="bold-tooltip"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover
by jaffathecake 1mo ago
The solution in the post is 4 lines:
<button aria-labelledby="bold-tooltip">
<svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>
Only one of those lines is the tooltip element. If you're comparing to the title attribute, it's one additional line, and solves all the problems vs title that others have already mentioned here.
I'm guessing you got 7 from the final code example which is referred to as "overkill", and only useful in cases where the tooltip has enough content to make it worth splitting up the label & description parts - something you can't do with a simple title attribute.
Basically, it's worth reading the thing you're critiquing.