如何移除flowbite-react侧边栏切换按钮的Tooltip？

当flowbite-react的侧边栏处于收起状态时，hover侧边栏任意项目会显示Tooltip。希望仅隐藏切换按钮的Tooltip（该按钮显示Tooltip无意义），同时保留其他项目的Tooltip。已查阅官方文档，但未在侧边栏主题设置中找到Tooltip相关配置。

相关代码如下：

import React from "react";
import { Sidebar, Flowbite, Button } from "flowbite-react";
import {
  HiChartBar,
  HiMailOpen,
  HiDatabase,
  HiPencilAlt,
  HiLink,
  HiShoppingCart,
  HiOutlineViewGrid,
} from "react-icons/hi";

const RightSidebar = () => {
  const customTheme = {
    sidebar: {
      root: {
        base: "list-none",
        inner: "h-full overflow-y-auto overflow-x-hidden px-3 py-4 bg-black",
      },
      collapse: {
        button:
          "group flex w-full items-center rounded-lg p-2 text-base font-normal text-slate-200       transition duration-75 hover:bg-zinc-600",
        icon: {
          base: "h-6 w-6 text-slate-200 transition duration-75",
          open: {
            off: "",
            on: "",
          },
        },
      },
      item: {
        base: "flex items-center justify-center transition-all duration-300 rounded-lg p-2 text-base font-normal text-slate-200 hover:bg-zinc-600 active:bg-zinc-700",
        content: {
          base: "flex-1 whitespace-nowrap px-3",
        },
        icon: {
          base: "h-6 w-6 flex-shrink-0",
        },
      },
    },
  };
  return (
    <Flowbite theme={{ theme: customTheme }}>
      <Sidebar collapsed aria-label="Default sidebar example">
        <Sidebar.Collapse icon={HiOutlineViewGrid}>
          <Sidebar.Items>
            <Sidebar.ItemGroup>
              <Sidebar.Item href="#" icon={HiMailOpen}>
                Dashboard
              </Sidebar.Item>
              <Sidebar.Item href="#" icon={HiShoppingCart}>
                Sign
              </Sidebar.Item>
              <Sidebar.Item href="#" icon={HiPencilAlt}>
                Dash
              </Sidebar.Item>
              <Sidebar.Item href="#" icon={HiLink}>
                Board
              </Sidebar.Item>
              <Sidebar.Item href="#" icon={HiDatabase}>
                Login
              </Sidebar.Item>
              <Sidebar.Item href="#" icon={HiChartBar}>
                Search
              </Sidebar.Item>
            </Sidebar.ItemGroup>
          </Sidebar.Items>
        </Sidebar.Collapse>
      </Sidebar>
    </Flowbite>
  );
};

export default RightSidebar;

由于Flowbite React的Sidebar组件没有直接提供关闭Collapse按钮Tooltip的配置项，你可以通过自定义CSS来精准隐藏该按钮的Tooltip，同时保留其他侧边栏项目的Tooltip功能。

方法一：全局自定义CSS #

在项目的全局样式文件（如index.css或App.css）中添加以下样式：

/* 仅在侧边栏收起状态下隐藏Collapse按钮的Tooltip */
.sidebar.collapsed .sidebar-collapse-button [data-tooltip] {
  display: none;
}

这段样式会选中处于收起状态的侧边栏中，Collapse按钮对应的Tooltip元素并将其隐藏，不会影响其他Sidebar.Item的Tooltip显示。

方法二：CSS Modules（模块化样式） #

如果你的项目使用CSS Modules，可以在组件文件中导入自定义样式：

import React from "react";
import { Sidebar, Flowbite } from "flowbite-react";
import styles from './RightSidebar.module.css';
// 导入图标...

const RightSidebar = () => {
  // 自定义主题代码...
  return (
    <Flowbite theme={{ theme: customTheme }}>
      {/* 添加自定义类名 */}
      <Sidebar collapsed className={styles.sidebar} aria-label="Default sidebar example">
        <Sidebar.Collapse icon={HiOutlineViewGrid}>
          {/* 侧边栏项目代码... */}
        </Sidebar.Collapse>
      </Sidebar>
    </Flowbite>
  );
};

export default RightSidebar;

然后在RightSidebar.module.css中添加样式：

.sidebar.collapsed .sidebar-collapse-button [data-tooltip] {
  display: none;
}

效果验证 #

添加样式后，当侧边栏处于收起状态时，hover Collapse按钮不会再显示Tooltip，而其他侧边栏Item的Tooltip功能保持正常。

内容的提问来源于stack exchange，提问作者Hamza Baig