react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

Component has a built-in margin-top: -10px effecting page styling

Open princefishthrower opened this issue 4 years ago • 1 comments

I'm putting the <ReactTooltip/> component in my root layout for a Gatsby site, so I can use tooltips on any page of my site using that layout (hopefully irrelevant to this problem). The problem is, I notice that this component seemingly has a built-in margin-top: -10px CSS rule when it is rendered to the page?!

Obviously, this will cause style issues on any page it is included in. How can I get rid of this pesky -10px margin-top rule?

princefishthrower avatar Feb 10 '21 12:02 princefishthrower

happening to me as well, the result is the bottom of the tooltip is pointing 10px lower...

https://github.com/wwayne/react-tooltip/blob/f08e999e814dc76ceb645bc11b0fc782800e38a9/src/decorators/styler.js#L38

you can use something like

&.place-top {
    margin-top: -6px !important;
  }

to patch it it

rickyzhangca avatar Mar 08 '22 21:03 rickyzhangca