CODEWITHSUNDEEP
cssreactjstooltipantdstyled-components
Ajit T Stephen
Ajit T Stephen

Reputation: 470

customize antd tooltip styles using styled components

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

Upvotes: 10

Views: 24598

Answers (4)

Azim Uddin Ahamed
Azim Uddin Ahamed

Reputation: 11

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

Upvotes: 0

Vladislav Sorokin
Vladislav Sorokin

Reputation: 415

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

Upvotes: 0

zerocewl
zerocewl

Reputation: 12804

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.

Upvotes: 17

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

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

Upvotes: 2

Related Questions