在工作过程中用到了很多ToolTip的组件,很多情况下直接用就行了,但是内部展示需要定制的时候,发现文档中的overlayStyle跟overlayClassName并不生效
在这个场景中,我需要hover展示的文本内容过多,大概有16k左右的文本,所以ToolTip的盒子需要自适应高度,带滚动条,这个倒是好弄,但是产品要求hover效果宽度增加,然后我设置了overlayStyle和overlayClassName的width都没法生效。在网上查询相关资料,发现要设置minWidth跟minHeight才会生效,同样的,类名也是一样设置minWidth和minHeight才会生效
<Tooltip
placement="left"
overlayStyle={{ minWidth: '600px' }}
title={() => {
return (
<div
style={{
minHeight: 100,
maxHeight: 600,
overflow: 'auto'
}}
>
{text}
</div>
);
}}
>
{text && text.slice(0, 100) + '...'}
</Tooltip>