Validation tooltip bug (from #30960)

[fchiumeo]

Fixing #25511 (#30960) introduced a new bug in tooltip validation

bootstrap doc

[domdomegg]

Why this is happening now

I've dug some digging, and this happens because left:0 sets the left edge of the validation feedback tooltip to the left edge of the parent element, ignoring padding.

The form row columns (.form-row>.col, .form-row>[class*=col-]) have a horizontal padding of 5px. This is ignored in setting the 'leftness' of the tooltip, so it appears 5px left of the inner box of the column.

This screenshot might help visualise what is happening (green is the col padding):

This doesn't happen with the username field in example #25511 because the padding is 0 within the .input-group container:

Why #25511 happened

Internet explorer is non standards compliant in respect to position: absolute, when left is not set (or is auto - what it should default to).

As per the CSS standard 10.3.7 (https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width), absolutely positioned elements should be placed where they would be if they were static elements for each axis.

When setting position: static to the validation tooltip in IE, we get:

Which clearly shows it should be left aligned with the field. However, IE seems to be ignoring this and placing it to the right of the element and we get this:

To fix this, #30960 set left: 0, which forced all browsers to align the tooltips to the leftmost of their parent containers. While this made them all do the same thing (as IE would follow that direction), it caused the issues mentioned above about alignment with padding.

A potential fix

I propose removing left:0 from the general CSS (as standards-compliant browsers display normally - I have tested in Chrome, Firefox and Edge). Then adding an IE-only hack to add:

• left: $form-grid-gutter-width / 2 for validation tooltips inside form columns
• left: 0 otherwise
  This should cover the majority of use cases for IE, and make browsers that aren't IE work properly.

[XhmikosR]

Fixed in #31557