有什么方法可以从 flowbite-react 侧边栏组件中的切换按钮中删除工具提示吗?

问题描述 投票:0回答:0

当侧边栏关闭并且您将鼠标悬停在侧边栏的任何项目上时,它会显示工具提示。 我不想在切换按钮上显示工具提示,因为它没有意义。 有什么方法可以仅从切换按钮隐藏此工具提示。应该适用于其他物品。

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;

在此输入图片描述

我尝试查看文档,但在侧边栏主题中找不到有关工具提示的任何内容

reactjs components tailwind-css sidebar flowbite
© www.soinside.com 2019 - 2024. All rights reserved.