Tooltip child div's getting overridden with selector css definition

Tooltip child div’s getting overridden with selector css defination

Detailed description

Using: import { Tooltip } from 'carbon-components-react';

We are rendering child div inside Tooltip like below:

        <Tooltip
            triggerClassName={styles.trigger}
            triggerText={someText}
            showIcon={false}
          >
            <div className={styles.myCustomStyles}>
              {someStuff()}
            </div>
          </Tooltip>

The CSS for div element will be overridden with below:

.bx--tooltip div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-top: 1rem;
}

This will override all the divs inside bx–tooltip which causes problems. Ideally, the consumer should have those definitions for the divs or any other element.

Is this issue related to a specific component? Tooltip from carbon-components-react

What did you expect to happen? What happened instead? What would you like to see changed? This will override all the divs inside bx–tooltip which causes problems. Ideally, the consumer should have those definitions for the divs or any other element.

What browser are you working in? Chrome, Firefox

What version of the Carbon Design System are you using? “carbon-components”: “9.6.1”, “carbon-components-react”: “6.18.3”,

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IGC, Information Server Next code freeze for release: Aug 17, 2018

Steps to reproduce the issue

1. Import Tooltip from carbon-components-react import { Tooltip } from 'carbon-components-react';

2. Render it on some element and have a div inside Tooltip component as a child

        <Tooltip
            triggerClassName={styles.trigger}
            triggerText={someText}
            showIcon={false}
          >
            <div className={styles.myCustomStyles}>
              {someStuff()}
            </div>
          </Tooltip>

1. Inspect on the child div. You will notice the CSS override for element as explained above.

[asudoh]

@dakahn Unfortunately this hasn’t been resolved yet: https://github.com/carbon-design-system/carbon-components/blob/v10.1.0/src/components/tooltip/_tooltip.scss#L83-L86

[tw15egan]

The div styling was removed in this PR, and now just adds basic text styling: https://github.com/carbon-design-system/carbon/pull/2781