Feature Request: button-icon tooltip integration

[AllanKerr]

What do we want to do?

Integrate d2l-tooltip into d2l-button-icon so setting the text attribute on a button automatically adds a tooltip with the text inside.

Why do we want to do this?

1. Tooltips use aria-describedby or aria-labelledby to make them accessible. However, these attributes are poorly supported on non-interactive elements. As a result tooltips on static or custom elements have inconsistent accessibility across screen readers. Attaching tooltips to the native button element fixes these issues. For more information see the tooltip README.
2. This gives sighted users a consistent way to see button-icon text when the icon alone isn't enough to infer the meaning of the button.

What challenges are involved?

1. Buttons may have parents that don't have overflow: visible. This means tooltips on buttons may cause unexpected scroll or be unexpectedly cut off. The tooltip's boundary attribute can be used to prevent this but has problems because:
   1. Users of d2l-button-icon would need to manually pass a boundary into the button-icon based on which parent has non-visible overlow.
   2. These components may not know if they have a parent with non-visible overflow like d2l-calendar which would mean they would also need to allow a boundary attribute to be passed in. This could cause a huge chain of boundary attributes that need to be passed down.
   3. d2l-button-icon would need to expose d2l-tooltip attributes as part of its interface.
2. Resolved: Buttons may also open other components like d2l-dropdown which risks overlap. The d2l-tooltip close-on-click attribute was introduced to resolve which mimics the behavior of native browser tooltips.