customize antd tooltip styles using styled components

user_5518625 0
Viewed 10866

I am trying to have custom width for antd tooltip component: Link to docs

How can this be done ?

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Tooltip } from "antd";
import styled from "styled-components";

const Styled = styled.div`
  .ant-tooltip-inner {
    color: yellow;
    background-color: green;
    width: 800px;
  }
`;

ReactDOM.render(
  <Styled>
    <Tooltip title="prompt text">
      <span>Tooltip will show on mouse enter.</span>
    </Tooltip>
  </Styled>,
  document.getElementById("container")
);
antd styled-components reactjs tooltip css
2 Answers

The antd Tooltips docs gives you a hint for your issue. The Tooltip is added as div in the body by default, in fact your custom style won't work without any adaptions. Depending on your requirements you can use

  1. GlobalStyle from Styled Components
  2. Overwrite getPopupContainer from Antd Tooltip

GlobalStyle

As one workaround you can use the globalStyle

const GlobalStyle = createGlobalStyle`
  body {
    .ant-tooltip-inner {
      color: yellow;
      background-color: green;
      width: 800px;
    }
  }
`;

ReactDOM.render(
  <Tooltip title="prompt text">
    <GlobalStyle />
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>,
  document.getElementById("container")
);

Here is a CodeSandbox for this workaround.

getPopupContainer

From the Tooltip docs for getPopupContainer

The DOM container of the tip, the default behavior is to create a div element in body

Here you can just pass the triggerNode to be the parent object and your styles are set as expected.

const Styled = styled.div`
  .ant-tooltip-inner {
    color: yellow;
    background-color: green;
    width: 800px;
  }
`;

ReactDOM.render(
  <Styled>
    <Tooltip title="prompt text" getPopupContainer={(triggerNode) => triggerNode}>
      <span>Tooltip will show on mouse enter.</span>
    </Tooltip>
  </Styled>,
  document.getElementById("container")
);

Working CodeSandBox for using getPopupContainer.

user_100360390

The default behavior for DOM container of the tip is to create a div element in body. You can change it to create inside Tooltip element with getPopupContainer:

<Tooltip
   getPopupContainer={(trigger) => {
      console.log(trigger);
      return trigger;
   }}
   title="prompt text"
>

With the code above you style .ant-tooltip-inner will work.

For more info, check this link -> Tooltip Antd API

user_47740450
Related