工具提示

查看源代码

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

演示

import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger, Button } from "@resolid/react-ui";

export default function App() {
  return (
    <Tooltip>
      <TooltipTrigger render={(props) => <Button {...props} />}>Hover me</TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        Tooltip content
      </TooltipContent>
    </Tooltip>
  );
}

用法

import { Tooltip, TooltipTrigger, TooltipArrow, TooltipContent } from "@resolid/react-ui";
  • Tooltip: 工具提示的根容器。
  • TooltipTrigger: 切换工具提示的按钮。
  • TooltipContent: 包含工具提示打开时要呈现的内容。
  • TooltipArrow: 一个可选的箭头元素，与工具提示一起渲染。
<Tooltip>
  <TooltipTrigger />
  <TooltipContent>
    <TooltipArrow />
  </TooltipContent>
</Tooltip>

特点

  • 通过 ARIA 作为辅助技术的工具提示公开。
  • 当触发器聚焦或悬停时打开。
  • 当触发器被激活或按下退出键时关闭。
  • 一次仅显示一个工具提示。
  • 通过 aria-describedby 为屏幕阅读器提供标签支持。
  • 自定义显示和隐藏延迟支持。

举例

颜色

通过传递 color 属性来更改工具提示的颜色。工具提示支持 primary、secondary、success、warning、danger 和 neutral 这些颜色。

import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";

export default function App() {
  const colors = ["primary", "secondary", "success", "warning", "danger", "neutral"];

  return (
    <div className={"flex flex-row justify-center gap-3"}>
      {colors.map((color) => (
        <Tooltip placement={"bottom"} key={color} color={color}>
          <TooltipTrigger
            render={(props) => <Button color={color} variant={"soft"} {...props} />}
            className={"capitalize"}
          >
            {color}
          </TooltipTrigger>
          <TooltipContent className={"capitalize"}>
            <TooltipArrow />
            {color} tooltip
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  );
}

可交互的

使用 interactive 属性在与其内容进行交互时保持工具提示打开。

import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";

export default function App() {
  return (
    <Tooltip interactive>
      <TooltipTrigger render={(props) => <Button {...props} />}>Hover me</TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        工具提示内容可交互
      </TooltipContent>
    </Tooltip>
  );
}

受控打开

使用 open 和 onOpenChange 属性来控制工具提示的可见性。

import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <Tooltip open={open} onOpenChange={setOpen}>
      <TooltipTrigger render={(props) => <Button {...props} />}>
        {open ? "Hide" : "Show"} tooltip
      </TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        Tooltip content
      </TooltipContent>
    </Tooltip>
  );
}

延迟时间

使用 openDelay 和 closeDelay 属性来更改工具提示的延迟。

import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";

export default function App() {
  return (
    <Tooltip openDelay={1000} closeDelay={500}>
      <TooltipTrigger render={(props) => <Button {...props} />}>
        Delay (open: 1000ms, close: 500ms)
      </TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        Tooltip content
      </TooltipContent>
    </Tooltip>
  );
}

动画时间

通过传递 duration 属性来更改工具提示的动画持续时间。

import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";

export default function App() {
  return (
    <Tooltip duration={2500}>
      <TooltipTrigger render={(props) => <Button {...props} />}>Hover me</TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        Tooltip content
      </TooltipContent>
    </Tooltip>
  );
}

上下文

TooltipProvider 组件为工具提示提供了上下文。接受 useTooltip 的值。你可以利用它来访问工具提示外部的组件状态和方法。

Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS 构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
import { TooltipArrow, TooltipContent, TooltipProvider, useTooltip } from "@resolid/react-ui";
import { useEffect, useRef } from "react";

const useTooltipSelection = () => {
  const ref = useRef(null);
  const { setOpen, setPosition, floatingElement, ...tooltip } = useTooltip({
    placement: "top",
    inlineMiddleware: true,
  });

  useEffect(() => {
    const node = ref.current;

    if (!node) {
      return;
    }

    const doc = node.ownerDocument || document;

    const handleMouseUp = (e) => {
      if (floatingElement?.contains(e.target)) {
        return;
      }

      requestAnimationFrame(() => {
        const selection = doc.getSelection();

        if (!selection?.rangeCount) {
          return null;
        }

        if (selection?.isCollapsed) {
          setOpen(false);
          return;
        }

        const range = selection.getRangeAt(0);

        if (range && node.contains(range.commonAncestorContainer)) {
          setPosition({
            getBoundingClientRect: () => range.getBoundingClientRect(),
            getClientRects: () => range.getClientRects(),
          });

          setOpen(true);
        }
      });
    };

    const handleMouseDown = (e) => {
      if (floatingElement?.contains(e.target)) {
        return;
      }

      if (doc.getSelection()?.isCollapsed) {
        setOpen(false);
      }
    };

    doc.addEventListener("mouseup", handleMouseUp);
    doc.addEventListener("mousedown", handleMouseDown);

    return () => {
      doc.removeEventListener("mouseup", handleMouseUp);
      doc.removeEventListener("mousedown", handleMouseDown);
    };
  }, [floatingElement]);

  return { tooltip, ref };
};

export default function App() {
  const { tooltip, ref } = useTooltipSelection();

  return (
    <>
      <div ref={ref} className={"w-80"}>
        Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
        构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
      </div>
      <TooltipProvider value={tooltip}>
        <TooltipContent>
          <TooltipArrow />
          Tooltip content
        </TooltipContent>
      </TooltipProvider>
    </>
  );
}

放置位置

通过传递 placement 属性来更改工具提示的放置位置。

上左上上右左上左左下自动右上右右下下左下下右
import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@resolid/react-ui";

export default function App() {
  return (
    <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
            render={(props) => <span {...props} />}
            style={{
              gridArea: placement === "auto" ? "center" : placement,
            }}
            className={
              "bg-bg-muted flex h-12 w-12 cursor-default items-center justify-center rounded-md text-center text-sm leading-tight"
            }
          >
            {name}
          </TooltipTrigger>
          <TooltipContent>
            <TooltipArrow />
            {name}位置的消息提示
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  );
}

属性

属性
duration

动画持续时间

类型number默认值250必须false
属性
color

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"neutral"必须false
属性
openDelay

打开延迟

类型number默认值300必须false
属性
closeDelay

关闭延迟

类型number默认值150必须false
属性
interactive

内容是否是交互。在此模式下，当用户将鼠标悬停在内容上时，工具提示将保持打开状态

类型boolean默认值false必须false
属性
placement

放置位置

类型"auto" | Placement默认值"auto"必须false
属性
inlineMiddleware

控制是否启用 inline 中间件

类型boolean默认值false必须false
属性
open

受控打开状态

类型boolean默认值-必须false
属性
defaultOpen

初始渲染时的默认打开状态

类型boolean默认值false必须false
属性
onOpenChange

打开状态改变时调用

类型(open: boolean) => void默认值-必须false

建议更改此页面