Hamza Baig
Hamza Baig

Reputation: 1

is there any way to remove tooltip from toggle button in flowbite-react sidebar component?

When the sidebar is closed and you hover over any item of sidebar, it shows a tooltip. I don't want that tooltip on toggle button because there it does not make sense. Is there any way that I can hide this tooltip from toggle button only. It should for other items.

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;

enter image description here

I tried to look in documentation but could not find anything in sidebar theme regarding tooltip

Upvotes: 0

Views: 79

Answers (0)

Related Questions