antd Tooltip 组件设置宽、高不生效及解决方案

 

一、antd Tooltip 组件设置宽度不生效

antd:3x实际上4x也可以。

默认用法：

title是要显示的文字

 <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
  </Tooltip>

我想要改变显示出的宽度，查找api发现使用overlayClassName（类名）、overlayStyle（样式） 这两个属性就可以。

于是我直接加上overlayStyle发现不生效。通过发f12审查元素，发现确实加上了但是就是没生效。包括overlayClassName也不生效，直接加style行内属性也不生效。

 <Tooltip placement="topLeft" overlayStyle={{width:900}} title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
  </Tooltip>

 

二、解决方案 

发现ant-tooltio-inner有min-width属性和min-hight属性，所以我试了一下加上min-width竟然可以了。

1.通过overlayStyle实现

因为react要求属性必须驼峰所以要是minWidth:900。同理设置高度就是minHeight:900

 <Tooltip placement="topLeft" overlayStyle={{minWidth:900}} title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
  </Tooltip>

2. .通过overlayClassName实现

 <Tooltip placement="topLeft" overlayClassName={'aa'} title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
  </Tooltip>

.aa{
 min-width:900;
 min-height:400;
}

 

antd Tooltio API