USWDS - Tooltip: Add top as default position

[danbrady]

Summary

Added default positioning. Updated the default position to "top" if data-position attribute is not specified.

Breaking change

This is not a breaking change.

Related issue

Closes #5218

Problem statement

1. Tooltip should appear on "top" when data-position omitted
2. Tooltip appears incorrectly positioned (at bottom left, with triangle pointing down)
3. If data-position is not specified, tooltip appears on broken

Solution

1. Detect if data-position on trigger is set
2. Use set position or "top" if not

Testing and review

1. Used this markup to test: <button type="button" class="usa-button usa-tooltip" title="Show me correctly">Show on top</button>
2. I didn't add this variation into the examples, but let me know if that is desired.

[mejiaj]

Thanks for your contribution @danbrady! I tested the following markup:

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

And was able to get the expected behavior.

[mejiaj]

Adding additional note as I remembered this was supposed to be handled in :318. We check for position in setUpAttributes and use the default.

---

Alternatively, we could pass it as a default parameter in showTooltip:

const showToolTip = (tooltipBody, tooltipTrigger, position="top") => {

[danbrady]

You're right, that's a better solution. Updated the PR. Thanks @mejiaj!

[mahoneycm]

Love having this as a fallback! Working great on my local 👍

[amyleadem]

Thanks for this submission @danbrady! I confirmed that the tooltip positioning now works as expected when no data-position attribute is added in the markup.

I just had one question:
@mejiaj - I noticed you flagged line 318 (now 320). Is the top assignment there still needed?

[mejiaj]

I just had one question: @mejiaj - I noticed you flagged line 318 (now 320). Is the top assignment there still needed?

Yes, but it could be improved by setting the data-position to top via setAttribute() or dataset.position = "top". Currently, it won't do anything if we default to string "top".

[danbrady]

FWIW, it appears that removing lines 318-320 as well as 'position' from the returning object on 355 will have no impact to the functionality of the tooltip, even before this PR. The positioning happens when showTooltip is called and it passes the value from trigger.dataset.position on 374.

I can update the PR to remove these line and keep the position param with a default value of 'top'. Or, alternatively, update the setUpAttributes method to do the position detection or fallback to 'top' (via setAttribute) and remove the default position param value. Is either one of those preferred?

[mejiaj]

@danbrady removing 318-320 might not have any effect on the functionality, but setting the attribute would be helpful in making the experience consistent and possibly easier to debug.

[danbrady]

@mejiaj Ok, updated! Let me know if that's more inline. I kept all the same logic in place for consistency, but safely added default "top" positioning.

[amyleadem]

I like this solution. It works well!

I tested this tooltip html with no data-position attribute:

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

And I saw that the tooltip is successfully assigning top position:

[mejiaj]

Nice fix, thank you!

Tested

<div class="margin-4">
    <button type="button" class="usa-button usa-tooltip" title="Forgot to position">No position set</button>
</div>

Result

[thisisdano]

Thank you!