sl-tooltip content gets affected by styling

[jessicakjellin]

Describe the bug

The first bug I have discovered is that the content clips the tooltip-box when the parent-element has the styling "white-space: nowrap;".

Secondly, the text in the tooltip-box gets affected by text-align styling. This seems to only be a problem when the sl-tooltip element is in a table/td-element.

Please see the codepen-link for a demo.

To Reproduce

Steps to reproduce the first behavior:

1. Surround the sl-tooltip with a div
2. Apply styling "white-space: nowrap;" to this div

Steps to reproduce the second behavior:

1. Have a sl-tooltip nestled in a td-element
2. Apply the styling "text-align:right;" to the td-element

Demo

Codepen link:
https://codepen.io/noica/pen/bGJrPra

Screenshots

The first bug:

The second bug:

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 123.0.6312.59

[claviska]

Thanks for reporting this. Some text styles inherit through the shadow DOM by design, but we clearly don't want these ones to do that. Fixed in #1948.

[jessicakjellin]

@claviska Thank you! I noticed that text-transform also leaks, e.g. text-transform: uppercase; on a parent makes the text in the tooltip uppercase. Is this supposed to leak through?