[Tooltip]: Class for caret for viewport awareness

[elizabethsjudd]

Viewport awareness requires DOM element

In order for tooltips to support view port awareness the ::before element that is used for the caret needs to be an actual DOM element. Since Carbon uses the pseudo element, we have no way to access the styles for that portion of the tooltip and had to copy and paste from the source code (not ideal for long term). Can you add a class for the caret so WHDS can inherit the styles? Look at:
https://github.ibm.com/Watson-Health/design-system/blob/develop/src/components/tooltip/index.scss

Is this issue related to a specific component?
Tooltip

What browser are you working in?
All Browsers

What version of the Carbon Design System are you using?
v8

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Watson Health Design System. Initial launch is end of Q1

[marijohannessen]

@aledavila is there any way you can include this in your Tooltip PR for the v2 version of the tooltips? I'm thinking it can be fixed by adding a span before the tooltip content like this:

<div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <p class="bx--tooltip__label">Tooltip subtitle</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

And then instead of using :before, you can switch that out with .#{$prefix}--tooltip__caret in _tooltip.scss.

[aledavila]

@marijohannessen yup I’ll give that a try. Thanks

[asudoh]

Great to see the question raised and thoughts put on this problem space! My $0.02 is that elimination of pseudo element here may lead to request for eliminating (eventually) all similar pseudo elements usage due to style override-ability. I guess another way to address this problem is defining a Sass mix-in where consuming application use as the default.

[joshblack]

Did you end up including this in your PR @aledavila?

[aledavila]

Ah this is what I missed I couldn’t find this issue after it was brought up. I did make the tooltip a don element so it’s just adding the caret to it instead of as ::after. I’ll do it @joshblack

[aledavila]

Fixed in #714