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.

That has nothing to do with the accessibility. That was table stakes for this person's button design.

- two lines for the button (one of which is just the closing tag)

- one line for an svg icon

- four lines for the tooltip.