工具提示

工具提示是用户与元素交互时出现的简短、信息丰富的消息。工具提示通常以两种方式之一启动：通过鼠标悬停手势或通过键盘悬停手势。

导入

import { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent } from "@resolid/react-ui";
  • Tooltip: 为其子级提供上下文的包装器。
  • TooltipTrigger: 用于包装引用或触发元素。
  • TooltipContent: 工具提示内容。
  • TooltipArrow: 指向引用或触发元素的视觉箭头。

用法

颜色

触发模式

<Tooltip trigger={'click'}>
  <TooltipTrigger asChild>
    <Button>点击触发</Button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipArrow />
    点击触发工具提示
  </TooltipContent>
</Tooltip>

动画持续时间

<Tooltip duration={3000}>
  <TooltipTrigger asChild>
    <Button>动画持续时间</Button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipArrow />
    持续时间很长
  </TooltipContent>
</Tooltip>

访问内部状态

<Tooltip>
  {({opened})=> (
    <>
      <TooltipTrigger asChild>
        <Button variant={'outline'}>
          {opened ? '出现提示' : '工具提示'}
        </Button>
      </TooltipTrigger>
      <TooltipContent>工具提示内容</TooltipContent>
    </>
  )}
</Tooltip>
);

颜色

{["primary", "neutral", "success", "warning", "danger"].map((color) => (
  <Tooltip placement={"bottom"} key={color} color={color}>
    <TooltipTrigger asChild>
      <Button className={"capitalize"} color={color} variant={"soft"}>
        {color}
      </Button>
    </TooltipTrigger>
    <TooltipContent className={"capitalize"}>
      <TooltipArrow />
      {color} 消息提示
    </TooltipContent>
  </Tooltip>
))}

放置位置

上左上上右左上左左下自动右上右右下下左下下右
<div
  className={"mx-auto grid w-fit gap-2"}
  style={{
    gridTemplateAreas:
      '".           top-start     top         top-end       .            "' +
      '"left-start  .             .           .             right-start  "' +
      '"left        .             center      .             right        "' +
      '"left-end    .             .           .             right-end    "' +
      '".           bottom-start  bottom      bottom-end    .            "',
  }}
>
  {[
    ["top-start", "上左"],
    ["top", "上"],
    ["top-end", "上右"],
    ["left-start", "左上"],
    ["left", "左"],
    ["left-end", "左下"],
    ["auto", "自动"],
    ["right-start", "右上"],
    ["right", "右"],
    ["right-end", "右下"],
    ["bottom-start", "下左"],
    ["bottom", "下"],
    ["bottom-end", "下右"],
  ].map(([placement, name]) => (
    <Tooltip key={placement} placement={placement}>
      <TooltipTrigger asChild>
        <span
          style={{ gridArea: placement == "auto" ? "center" : placement }}
          className={
            "flex h-12 w-12 cursor-default items-center justify-center rounded bg-bg-muted text-center text-sm leading-tight"
          }
        >
          {name}
        </span>
      </TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        {name}位置消息提示
      </TooltipContent>
    </Tooltip>
  ))}
</div>

属性

属性trigger类型"click" | "hover"默认值'hover'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'neutral'必须false
属性placement类型"auto" | Placement默认值'auto'必须false
属性duration类型number默认值'250'必须false