工具提示

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

导入

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

Tooltip: 工具提示的根容器。
TooltipTrigger: 切换工具提示的按钮。
TooltipContent: 包含工具提示打开时要呈现的内容。
TooltipArrow: 一个可选的箭头元素，与工具提示一起渲染。

用法

颜色

放置位置

打开延迟

关闭延迟

举例

颜色

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

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

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      {["primary", "secondary", "success", "warning", "danger", "neutral"].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 (
    <div className={"flex flex-row gap-3"}>
      <Tooltip interactive>
        <TooltipTrigger render={(props) => <Button {...props} />}>Hover me</TooltipTrigger>
        <TooltipContent>
          <TooltipArrow />
          持续时间很长
        </TooltipContent>
      </Tooltip>
    </div>
  );
}

受控打开

使用 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 (
    <div className={"flex flex-row gap-3"}>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger render={(props) => <Button {...props} />}>
          {open ? "Hide" : "Show"} tooltip
        </TooltipTrigger>
        <TooltipContent>
          <TooltipArrow />
          Tooltip content
        </TooltipContent>
      </Tooltip>
    </div>
  );
}

延迟时间

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

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

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

动画时间

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

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

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <Tooltip duration={2500}>
        <TooltipTrigger render={(props) => <Button {...props} />}>Hover me</TooltipTrigger>
        <TooltipContent>
          <TooltipArrow />
          Tooltip content
        </TooltipContent>
      </Tooltip>
    </div>
  );
}

上下文

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, setPositionReference, floatingReference, ...tooltip } = useTooltip({
    placement: "top",
  });

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

    if (!node) {
      return;
    }

    const doc = node.ownerDocument || document;

    const handleMouseUp = (e) => {
      if (floatingReference.current?.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)) {
          setPositionReference({
            getBoundingClientRect: () => range.getBoundingClientRect(),
            getClientRects: () => range.getClientRects(),
          });

          setOpen(true);
        }
      });
    };

    const handleMouseDown = (e) => {
      if (floatingReference.current?.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);
    };
  }, [floatingReference]);

  return { tooltip, ref };
};

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

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

放置位置

通过传递 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>
  );
}

属性

属性	类型	默认值	必须
属性open	简介受控打开状态	类型boolean	默认值-	必须false
属性defaultOpen	简介初始渲染时的默认打开状态	类型boolean	默认值false	必须false
属性onOpenChange	简介打开状态改变时调用	类型(open: boolean) => void	默认值-	必须false
属性color	简介颜色	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值"neutral"	必须false
属性placement	简介放置位置	类型"auto" \| Placement	默认值"auto"	必须false
属性openDelay	简介打开延迟	类型number	默认值300	必须false
属性closeDelay	简介关闭延迟	类型number	默认值150	必须false
属性interactive	简介内容是否是交互。在此模式下，当用户将鼠标悬停在内容上时，工具提示将保持打开状态	类型boolean	默认值false	必须false
属性duration	简介动画持续时间	类型number	默认值250	必须false

建议更改此页面