Style using styled components

[net-bet]

Hi,

Is it possible to style the tooltip using styled components? When I wrap the components with styled(Tooltip)' // all css here ' It doesn't work.

I know I can use my own styled container and pass it to overlay, but I need a solution to style the arrow....

[07akioni]

it may not be easy to do this since content is detached to document.body. use plain css instead

[zaycker]

we created our own layer through the prefixCls. it's not an ideal but works... and it requires to define all styles (copy-paste from original css and replace prefix with &- or &&- sometimes)

const StyledTooltip = styled.div`
  position: absolute;
  color: #fff;
  background: #000;
  border-radius: 0.5rem;
  width: 18.75rem;
  padding: 2.375rem 1.5625rem;
  box-sizing: border-box;

  &-hidden {
    display: none;
  }

  &-arrow {
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    left: 0;
    top: 0;

    background: #000;;

    border-radius: 0.5rem;
    transform: matrix(0.71, -0.74, 0.68, 0.71, 0, 0);
  }

  &&-placement-left &-arrow {
    top: calc(50% - 0.8125rem);
    left: calc(100% - 1.1875rem);
  }

  ...
`;

type StyledTooltipByPrefixClsProps = ComponentProps<typeof RCTooltip> & {
  className?: string;
};

const StyledTooltipByPrefixCls: FC<StyledTooltipByPrefixClsProps> = ({
  className,
  ...props
}) => <RCTooltip prefixCls={className} {...props} />;

export const Tooltip: FC<TooltipProps> = (props) => {
  const { overlay, closeWithButton, placement } = props;

  const overlayModified = (
    <>
      {closeWithButton && (
        <StyledCloseButton onClick={() => props.onVisibleChange?.(false)}>
          <CrossSvg />
        </StyledCloseButton>
      )}
      {typeof overlay === 'function' ? overlay() : overlay}
    </>
  );

  // blahblahlbah

  return (
    <StyledTooltip
      as={StyledTooltipByPrefixCls}
      {...props}
      overlay={overlayModified}
    />
  );
}

[VasilikiLoukoumi]

You can change the arrow and whatever you like by using the function getTooltipContainer. By default it returns the body element but you can make your own wrapper element (styled component) and use that. For example:

//styled component - wrapper element

export const StyledDiv = styled.div`
  .rc-tooltip-arrow {
      border-right-color: red;
      }`;

//ref

const divRef = useRef();

//getTooltipContainer built-in function

const getTooltipContainer = () => divRef.current;

//Tooltip wrapped in your styled component

<StyledDiv ref={divRef}><Tooltip getTooltipContainer = { getTooltipContainer } /> </StyledDiv>

[VasilikiLoukoumi]

Or... you can override it in your Theme

[andymerskin]

Another option is using Styled Components' global styles helper, and rc-tooltip's default set of classnames. A little more straightforward than reworking all of the classNames by hand:

import { createGlobalStyle } from 'styled-components';

export const MyTooltipStyles = createGlobalStyle`
  .rc-tooltip.rc-tooltip-zoom-appear,
  .rc-tooltip.rc-tooltip-zoom-enter {
    opacity: 0;
  }
  .rc-tooltip.rc-tooltip-zoom-enter,
  .rc-tooltip.rc-tooltip-zoom-leave {
    display: block;
  }
  ...
`;

Customize away! And then just render this component wherever you want these to brought in. Since tooltips are usually an app-wide component, render <MyTooltipStyles /> at your app's root somewhere.

[Argam11]

const Tooltip = ({
  children,
  title,
  visible,
  className
}) => {
  return (
    <RcTooltip
      trigger="click"
      visible={visible}
      placement="top"
      prefixCls={`${className} rc-tooltip`} // <---
      overlay={...}
    >
      {children}
    </RcTooltip>
  );
};

const StyledTooltip = styled(Tooltip)`
    // styles...
`;