如何更改 Ant Design 的工具提示（Tooltip）宽度？

Question

我想改变工具提示的宽度，但我不知道如何操作。
应该怎样做呢？

import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';

export interface Props {
  tooltipeText: string
}

const hintWithTooltipeStyle = {
  position: 'relative' as 'relative',
  left: 5,
  top: 1
};


const HintWithTooltipe: FunctionComponent<Props> = ({
  tooltipeText
}: Props) => {
  return (
    <span style={hintWithTooltipeStyle}>
      <Tooltip placement="rightTop" title={tooltipeText} style={{width: 700, maxWidth: '500px !important'}}>
        <Button>Ant design</Button>
      </Tooltip>
    </span>
  );
};

export default HintWithTooltipe;

内联样式不起作用。
没有任何样式起作用。

- HaZcker

Answer 1

您可以这样做，而不需要使用CSS类：

<Tooltip placement="rightTop" title={tooltipeText} overlayStyle={{maxWidth: '500px'}}>
     <Button>Ant design</Button>
</Tooltip>

- user16756552

Answer 2

Antd工具提示可以通过覆盖css类.ant-tooltip-inner中的值进行自定义调整。

.ant-tooltip-inner {
  color: yellow;
  background-color: green;
  width: 200px;
}

这里有一个可工作的CodeSandBox，请查看index.css文件以了解更改。

- zerocewl

---

使用styled-components时，这个链接https://codesandbox.io/s/icy-monad-urol3中的代码无法正常工作。你能解释一下吗？ - Ajit T Stephen

@AjitTStephen 工具提示是在 DOM 的根部创建的，styled-components 只会将样式应用于其下方的组件。 - Eduardo Dallmann

这会全局性地改变。我认为这不是一个好的做法。@zerocewl - Prashanth Damam

Answer 3

或者您可以从Tooltip中访问overlayInnerStyle属性。

<Tooltip overlayInnerStyle={{width: '250px'}} title={`tootltip text`}>
  Info Text
</Tooltip>

- stefantut

Answer 4

您应该使用min-width来更改内部边框。

overlayStyle={{ maxWidth: '260px' }}

- Omgpiu