Definitive guide for styling react-tooltip components?

Question

I am using react-tooltip, react-emotion.

I cannot figure out how to style the span in order to override default styles.

Here's what I've got so far:

import React, { PureComponent } from 'react';
import styled from 'react-emotion';

const myTooltip = (Wrapper, toolTip) => {
  class TooltipWrap extends PureComponent {
    render() {
      return (
        <span
          data-tip={toolTip}
          data-delay-show="250"
          data-place="bottom"
          className={TooltipStyle}
        >
          <Wrapper
            {...this.props}
          />
        </span>
      );
    }
  }

  return TooltipWrap;
};

export default withToolTip;

const TooltipStyle = styled.span ({
  color: 'red !important';
  fontSize: '48px !important';
})

Anyone have any tips or a specific definitive guide on how to style this span so I can override the defaults in react-tooltip?

The documentation is pretty spotty, and there's literally no examples anywhere on the web.

Emma · Answer 1 · 2020-04-01T16:59:16.917

I ran into a similar issue but was able to override the default styles using styled components and passing it the ReactTooltip component

import React, { PureComponent } from 'react';
import styled from 'react-emotion';
import ReactTooltip from 'react-tooltip';

const myTooltip = (Wrapper, toolTip) => {
  class TooltipWrap extends PureComponent {
    render() {
      return (
        <span
          data-tip={toolTip}
          data-delay-show="250"
          data-place="bottom"
        >
          // Replace ReactTooltip component with styled one
          <ReactTooltipStyled type="dark" />
          <Wrapper
            {...this.props}
          />
        </span>
      );
    }
  }

  return TooltipWrap;
};

export default withToolTip;

export const ReactTooltipStyled = styled(ReactTooltip)`
  &.place-bottom {
    color: red;
    font-size: 48px;
  }
`;

Using this method all you would need to do is import the newly styled component into your React file and replace the original ReactTooltip with the ReactTooltipStyled component.

Definitive guide for styling react-tooltip components?

1 Answers1