Skip to main content

Tooltip

yggdrasil::components::ui

Function Tooltip 

Source 
pub fn Tooltip(_: TooltipProps) -> Element
Expand description

Tooltip 包裹组件。

将任意触发器（按钮等）包裹后，鼠标 hover 时在上方或下方弹出提示。 用 CSS group/tooltip + group-hover/tooltip:opacity-100 实现，无 JS 状态，pointer-events-none 保证不拦截点击。

Props：

  • tip：提示文案
  • children：触发器元素（按钮 / 链接等）
  • placement：垂直方向，"top"（默认，弹出在触发器上方）或 "bottom"（下方）
  • align：水平对齐，"center"（默认，居中）/ "start"（左对齐，向右延伸）/ "end"（右对齐，向左延伸）

注意：父容器若有 overflow-hidden（如 ADMIN_TABLE_CLASS），position:absolute 的 tooltip 会被裁掉。此时除选朝外的 placement 外，还须用 align 让 tooltip 朝容器内侧延伸——否则居中的宽 tooltip 越过容器边缘即被裁（见 issue #14： 表格最右列按钮的 tooltip 右半段被裁、左半段压住相邻内容）。

§Props

For details, see the props struct definition.