playground

Smooth Tooltip

v1.0.0

整条气泡轮廓用一条 path 画成:凹角外扩(C) · 直斜边(L) · 圆角顶点(A)。 调参实时预览,可导入 / 导出配置,底部有真实悬停示例。

导入 / 导出配置
参数改动会自动保存(刷新不丢失)
保存复制链接删除这条记录?

悬停 / Tab 聚焦上面的按钮看真实 tooltip

构造原理

  • ① 凹·外扩三角根部用三次贝塞尔 C:底边端水平切线、斜边端沿斜边切线,让根部向外平滑铺开 flare
  • ② 直斜边中段保留一段直线 L,让它仍然「像个三角」而非纯水滴。
  • ③ 凸·圆角顶点用圆弧 A,从斜边回退 tip·ah/aw 出切点,得到圆润尖角。
  • 一条 path面板四角 + 上面三段全部首尾相接成单条闭合路径,单 fill 即可,无拼接缝。

形状随容器 currentColor 取色,自动适配明暗主题。

Usage

<Tooltip
  label="保存"
  geo={{ aw: 8, ah: 7, flare: 4, tip: 2, R: 8 }}
>
  <button>保存</button>
</Tooltip>