USWDS - Bug: Tooltip documentation claims the tooltip positioned "top" when not specified; Incorrectly positions bottom left

[danbrady]

Describe the bug

The tooltip documentation says:

By default, tooltips appear on the top of their related element.

and

• data-position="top": On top, horizontally centered. If the data-position attribute is omitted, the tooltip will appear on top by default.

However, when data-position is not specified at all, the tooltip is incorrectly positioned bottom left of trigger.

Steps to reproduce the bug

1. Create a button with class="usa-tooltip" and title but no data-position attribute.

Expected Behavior

Tooltip should appear as if data-position="top" is set.

Related code

<div class="padding-8">
  <div class="margin-4">
    <button type="button" class="usa-button usa-tooltip" title="Tooltip">Show tooltip</button>
  </div>
</div>

Codepen demo

Screenshots

System setup

• 3.4.1
• Desktop
• MacOS 11.7.4
• Chrome v111.0.5563.146

Additional context

Would be happy to tackle this if confirmed!

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.

[mejiaj]

Thank for taking this on! I can confirm using a tooltip without position set results in incorrect placing.

<button type="button" class="usa-button usa-tooltip"  title="No position set on this tooltip">Hello world</button>