[Bug]: Tooltip content gets cutoff near the edge of the container

[fbarroso24]

Package

@carbon/react

Browser

Chrome

Package version

v1.53.1

React version

v18.2.0

Description

We have a flyover with a set max-width. The flyover contains various fields & tooltips. In some scenarios, the contents of the tooltip gets cutoff. This tends to happen if the tooltips appear near the edge of the container or if the contents of the tooltip contain a few sentences. Here's a screenshot below.

We have experimented with the autoAlign prop but that doesn't always work because sometimes the content of the tooltip will cutoff on the other side of the flyover. In addition, we have also investigated using isolation: 'isolate' & transform: translate3d(0, 0, 1px); to no avail.

We have been able to reproduce this on Stackblitz. The simple example is to put a tooltip near the edge with align='bottom' and then notice how the tooltip will get cutoff (see below).

One possible solution we have been looking at is to see if we could force the max-width of the tooltip to be smaller than the width of the container (e.g. flyover). However, that requires us to have an assortment of css style workarounds to try and cover all the permutations across all areas in the product.

It would be good if this were handled by the component OOTB.

Reproduction/example

https://stackblitz.com/edit/github-z8vcs7-cyux4s?file=src%2FApp.jsx

Steps to reproduce

The simple example is to put a tooltip near the edge with align='bottom' and then notice how the tooltip will get cutoff (see below).

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

OpenPages

Code of Conduct

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

[fbarroso24]

FYI @tay1orjones @andy-blum

[riddhybansal]

Hey there @fbarroso24 we have encountered such issues in many components and introduced a prop called "autoAlign". This will align the floating element where it best fits.
Here is the stackblitz example for the same