using react tooltip with styled components

Question

anyone got any experience using react-tooltip with styled-components?

I tried to wrap my tooltip inside a styled component but they styles weren't fully showing

I wanted a yellow background but got a yellow background with a massive black border

I also want to place the tooltip directly over the top of where I hover, can anyone show me how to do this if possible?

code:

<div>
    <ReactTooltip className="extraClass" effect="solid">
        {'I shall be the text and this is where I will go'}
    </ReactTooltip>
</div>

how do I add the extraClass if im using styled-comps?

Answer 1

This answer is maybe not by the book but I also did not manage to find a way to style at proper way using styled components.

This is my working example.

import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';

export const ReactTooltipStyled = styled(ReactTooltip)`
  &.type-dark.place-top {
    background-color: blue;
    padding: 0.3rem 1rem;

    &:after { 
      border-top-color: blue;
    }
  }
`;

You just need to import the newly styled component in your React file and use it instead of original ReactTooltip component.

Answer 2

For me, this solution finally worked as expected.

const StyledTooltip = styled(ReactTooltip)`
  max-width: 20vh;
  white-space: normal;
`
const Tooltip = ({ ...props }) => (
  <StyledTooltip effect="solid" multiline place="top" {...props} />
)