customize antd tooltip styles using styled components

Question

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")
);

Pollerd

Answer 1

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.

Alika

Using GlobalStyle is a solution just not a violable one. I also have the same problem, and getPopupContainer is a good solution if you want to wrap the component like that. The problem is that when you try to add placement="top" is does not work. Also if you Tooltip text is longer it will not brake like it does by default. Try and see what happens in you Sandbox. @Alika – Ectoenzyme

I had a similar problem, and after reading this answer was able to solve it using getPopupContainer in a manner similar to the one outlined here. As of this writing, the documentation for getPopupContainer from Ant Design isn't great, I had to do some trial and error to figure out where to put my classes and what to specify as the popup container, and this answer was a help with that. – Inwardness

Note that if you don't want the tooltip inside the span, you can do something like this: ``` <Tooltip title="prompt text" getPopupContainer={(triggerNode) => triggerNode}> <Styled> <span>Tooltip will show on mouse enter.</span> </Styled> </Tooltip> ``` This will still result in the tooltip being styled as desired, but now the span and the tooltip will both be children of the styled div. This was handy in my case where the triggerNode was a replaced element which could not have children. – Inwardness

Answer 2

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

Natoshanatron

Answer 3

For somebody looking for an "antd@5 theme solution", the colour of a tooltip could be set on a theme with colorTextLightSolid token

Iodide

Answer 4

I have solved this like way.

 <Tooltip
    style={{ whiteSpace: "pre-line" }}
    title={
      // eslint-disable-next-line react/no-danger-with-children
      <p
        dangerouslySetInnerHTML={{
          __html: JSON.parse(props?.node?.attrs?.wholePrompt).prompt,
        }}
      ></p>
    }
    color={"geekblue"}
  >

Click me

Munsey