antd5 tooltip 箭头贴边偏移,极限位置调整。

517 阅读1分钟

antd5 tooltip 箭头贴边偏移,极限位置调整

antd5提供了tooltip贴边偏移的功能,但并没提供详细的调整方法,只能给啥用啥,遇到较真的UI就很头疼了。翻了下源码,发现可以通过align属性做一些微调,比如UI最关心的,极限情况下箭头和宿主元素的距离问题。

image-20240311164359449.png

<Tooltip
          open
          align={{
            overflow: {
              adjustY: true,
              shiftX: 20, // 默认是40,根据需要调整大小。这个配置是搭配placement---top使用的。
              shiftY: true,
            },
          }}
          title="Tooltip 文字提示"
        >
          <div className={buttonStyle}>鼠标hover</div>
        </Tooltip>

具体参数,可以用devtool自行查看。

placement.png