如何使用Tailwind和React Js的自定义 "工具提示 "组件

你好
我希望你们都身体健康。我总是喜欢创建自定义组件（如工具提示）而不是库，因为库大多会带来额外的代码。当然，对于主要的功能。你应该使用库，因为它的代码经过了优化，并提供了各种可能性。

让我们回到我们最初的话题。选择Tailwind而不是bootstrap背后的原因。

1. 它是高度可定制的。
2. 它有常见的实用模式。
3. 它可以使用Purge CSS进行优化。
4. 它能自由地建立复杂的响应式布局。
5. 它促进了流畅的社区互动。

我不会详细解释这些要点，但我希望它们足以给人一个概念：

import React, { ReactNode, useState } from "react";

export const Tooltip = ({ message, children }: { message: string; children: ReactNode }) => {
  const [show, setShow] = useState(false);
  return (
    <div className="relative flex flex-col items-center group">
      <span onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
        {children}
      </span>
      <div className={`absolute top-0 flex flex-col items-center -mt-11 group-hover:flex ${!show ? "hidden" : null}`}>
        <span className="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
          {message}
        </span>
        <div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600" />
      </div>
    </div>
  );
};

现在，你可以简单地导入这个并像下面这样调用它

<Tooltip message="Hello, world!">
   <InfoIcon />
</Tooltip>

你可以为你的工具提示框设计任何类型的样式。此外，它还允许你对信息文本进行样式化，而这是你在npm包中无法做到的。我希望这对你有帮助.