Tooltip is part of layout calculation

[brunnerh]

For example in password fields there is this button on the far right which has a tooltip that can break the layout by causing the document content width to be larger than it is supposed to be:

Tooltips should not affect the layout of the page like this; the page becomes horizontally scrollable just because of this tooltip. If there is not enough space to one side because of the document boundaries, the tooltips should be shifted to the side. This applies to both the left and right edge of the document. Of course the little arrow would still have to be centered on the object the tooltip is applied to.

The React implementation has the same issue, but I doubt that this could be fixed by simply adjusting the underlying base styles.

[brunnerh]

Carbon appears to support hard alignments. In the case of the show/hide button in the password input the problem could be fixed by adding the bx--tooltip--align-end class to the button. Not particularly elegant in my opinion, but it works.

[metonym]

You can use the tooltipAlignment and tooltipPosition props to customize the orientation of the visibility toggle:

<FluidForm>
  <TextInput
    labelText="User name"
    placeholder="Enter user name..."
    required />
  <PasswordInput 
    tooltipAlignment="start"
    tooltipPosition="left"
    required
    type="password"
    labelText="Password"
    placeholder="Enter password..."
  />
</FluidForm>

[brunnerh]

@metonym As noted, i do not think tooltips should affect layout and normally they should simply be bounded to the current dimensions of the page.

Having the option to manually set alignments to get an even nicer result is great, but the library should take care of the basic task of not accidentally breaking the layout.

[brunnerh]

My suggestion would be to constrain the tooltip to the governing scrolling/clipping container, or the document body, if no such container is found. This could be done by first calculating the desired layout and then offsetting the tooltip, if any part is out of bounds.

REPL sketch

One possible optimization would be to flip the tooltip to above the target element, when it exceeds the lower bound. In any case, it would be nice if something could be done about this, as this is a recurring problem. Unfortunately there seems to be no easy, pure CSS solution for this (e.g. using position: sticky somehow).