如何改变 Ant design Tooltip 宽度答案

【问题标题】：How change Ant design Tooltip width如何改变 Ant design Tooltip 宽度
【发布时间】：2020-11-18 03:55:01
【问题描述】：

我想更改工具提示的宽度，但我不能。
我该怎么做？

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;

内联样式不起作用。
根本没有样式可以工作

【问题讨论】：

如果答案满足您的要求，请vote。
@zerocewl 我的名声不够。如果可能，我一定会投票。谢谢你的回答，你帮助了我

标签： css reactjs typescript antd

【解决方案1】：

antd Tooltip 可以通过覆盖 css 类 .ant-tooltip-inner 中的值来进行调整。

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

这是一个有效的CodeSandBox，请查看index.css 文件以进行更改。

【讨论】：

带有样式组件，这不起作用codesandbox.io/s/icy-monad-urol3你能解释一下吗？
请为此问题创建一个新问题
@AjitTStephen Tooltip 是在 DOM 的根目录下创建的，styled-components 只会将样式应用到它下面的组件。
这会在全局范围内更改。我认为这不是一个好习惯。 @zerocewl

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

不用css类也可以这样做

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

【讨论】：

【解决方案4】：

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

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

【讨论】：