fix(popover, tooltip): change display to contents

[driskull]

Related Issue: #11378

Summary

• change default display on tooltip and popover from block to contents.

BEGIN_COMMIT_OVERRIDE
omitted from changelog
END_COMMIT_OVERRIDE

[macandcheese]

Code changes look good! Is there a quick explainer of the pros / any cons of this change or things implementers should look out for?

[driskull]

Here's a good explainer: https://css-tricks.com/get-ready-for-display-contents/

One answer to this is display: contents;—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.

display: contents makes that the div doesn’t generate any box, so its background, border and padding are not rendered. However the inherited properties like color and font have effect on the child (span element) as expected.

This should be fine since we don't want the host of the tooltip/popover to have any dimensions or affect any parent elements dimensions.

[driskull]

Something to watch out for is that setting a width/height on a tooltip would no longer take up any space. Although this is a pro since it doesn't have any advantage to it.

https://codepen.io/Matt-Driscoll/pen/XJroEdr?editors=1010

[driskull]

@jcfranco can you review?

[macandcheese]

Something to watch out for is that setting a width/height on a tooltip would no longer take up any space. Although this is a pro since it doesn't have any advantage to it.

https://codepen.io/Matt-Driscoll/pen/XJroEdr?editors=1010

Cool. Same for Popover then - folks may just need to move any set widths on Popover to a child element it sounds like.

[driskull]

Cool. Same for Popover then - folks may just need to move any set widths on Popover to a child element it sounds like.

Yes, that is already the case for 3.0 anyway

[jcfranco]

Noice!

Should this use fix (+ no changelog entry label )instead? It addresses the layout regression from #10240 by changing the display mode.