Tooltip is not browser aware and is clipped

[joshblack]

When visiting a tooltip example that runs to the edge of the screen, we observe this behavior:

This issue is to determine whether or not we need to make the tooltip positioning browser-aware or if there is another solution we could use that would not clip the text in the tooltip.

[asudoh]

Recommended to introduce alignment options like definition/icon tooltips, in case interactive tooltip does not have one.

[joshblack]

@asudoh what is the recommendation to detect when placement needs to be updated? Like, in this case, we'd want to move it to the right when the browser becomes small or if viewing from a mobile device.

[asudoh]

Just in case my above commend was not clear enough; Definition/icon tooltip has alignment options so that tooltip caret can be positioned at the left/right of the tooltip body so the the left of tooltip body is close or aligned to the trigger button/icon, etc.

[joshblack]

Right, I follow that there are alignment options for tooltips. My question was around how would a user understand that the current alignment option would be clipped by the browser due to its placement and update it dynamically 👍

[asudoh]

I wouldn't recommend OOTB automatic alignment option due to the complexity around it. It may be different for PALs/applications using Carbon.

[joshblack]

I definitely understand if we don't want to do this out-of-the-box, I'm curious what we would recommend to teams then who are encountering this issue.

[asudoh]

No recommendation in particular; PALs/applications can use regular techniques to detect element positions/sizes.

[TannerS]

I am also having this issue

[ngtiffan]

Can we add this as an optional feature? Like it's implemented but it won't be turned on unless we specify that it does via some attribute. I can see this being really useful in a lot of situations. If the tooltip goes out of bound on the left, move the placement to the right. If it goes out of bounds on the bottom side, move it to the top and vice versa.

[maniax89]

@asudoh is there a chance that https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom will adopt the same alignment options as https://react.carbondesignsystem.com/?path=/story/tooltipdefinition--default ? right now it seems like we don't have control over the interactive one

[asudoh]

The effort is tracked separately at #3837.

[andreancardona]

This issue no longer exists. Closing. :)