使用 Tailwind CSS、React-Pro-sidebar、React-tooltip 使 Tooltip 组件显示在 SideBar Nav 之外

Question

我有一个用 Tailwind CSS 制作的边栏，React-Pro-sidebar。我在边栏中有一些项目，我希望项目的图像具有工具提示。我正在为工具提示使用 react-tooltip 并且当前正在显示它。我唯一的问题是它没有显示在侧边栏之外。

我试过改变侧边栏的位置和位置，但没有成功。还尝试了不同的顺风 CSS 样式。

import React from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from 'react-oidc-context'
import { JwtHelper } from '../../utils/JwtHelper'
import { Sidebar, Menu, MenuItem, useProSidebar } from 'react-pro-sidebar'
import { InboxArrowDownIcon } from '@heroicons/react/24/outline'
import { Bars4Icon } from '@heroicons/react/24/outline'
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline'
import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline'
import { HomeIcon } from '@heroicons/react/24/outline'
import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

const SideBar = () => {
  const auth = useAuth()

  const { collapseSidebar } = useProSidebar()
  return (
    <Sidebar>
      <div className="space-y-4">
        <nav>
          <Link to="/">
            <Menu>
              <MenuItem
                icon={<Bars4Icon />}
                onClick={() => {
                  collapseSidebar()
                }}
              >
                <h1 className="text-3xl font-bold text-center">OEVis</h1>
              </MenuItem>

              <MenuItem icon={<HomeIcon />}>
                <Tooltip
                  data-tooltip-id="my-tooltip"
                  data-tooltip-content="Home"
                  className="p-0"
                ></Tooltip>
                Dashboard
              </MenuItem>

              <MenuItem
                className="example-container"
                icon={
                  <InboxArrowDownIcon
                    data-tooltip-id="my-tooltip1"
                    data-tooltip-content="About"
                    data-tooltip-place="right"
                    data-tooltip-offset={40}
                    className="w-full"
                  />
                }
              >
                About
                <Tooltip id="my-tooltip1" />
              </MenuItem>

              <MenuItem
                icon={
                  <AdjustmentsHorizontalIcon
                    data-tooltip-id="my-tooltip2"
                    data-tooltip-content="Settings"
                    data-tooltip-place="right"
                    data-tooltip-offset={40}
                    data-tooltip-float
                  />
                }
              >
                Settings
                <span>
                  <Tooltip id="my-tooltip2" />
                </span>
              </MenuItem>
              <div className="border-b-4 border-gray-500 ..."></div>

              <MenuItem
                className="font-bold"
                icon={
                  <ArrowLeftOnRectangleIcon
                    className="h-12 w-12"
                    onClick={() => void auth.signoutRedirect()}
                  />
                }
              >
                {new JwtHelper().decodeToken(auth.user?.access_token).Displayname}
              </MenuItem>
            </Menu>
            <div></div>
          </Link>
        </nav>
        <div className="border-b-4 border-gray-500 ..."></div>
      </div>
    </Sidebar>
  )
}
export default SideBar

我的应用程序.tsx

import { Route, Routes } from 'react-router-dom'
import Home from './pages/Home'
import './App'
import { useAuth, hasAuthParams } from 'react-oidc-context'
import { useEffect } from 'react'
import LoadingSpinner from './components/LoadingSpinner'
import Layout from './components/layout/Layout'
import BannerConsent from './components/BannerConsent'

const App = () => {
  const auth = useAuth()

  // Automatically sign-in
  useEffect(() => {
    if (!hasAuthParams() && !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading) {
      auth.signinRedirect()
    }
  }, [auth.isAuthenticated, auth.activeNavigator, auth.isLoading, auth.signinRedirect])

  if (auth.isLoading) {
    return (
      <div
        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
      >
        <LoadingSpinner></LoadingSpinner>
      </div>
    )
  }
  if (auth.activeNavigator) {
    return <div>Signing you in/out...</div>
  }
  if (!auth.isAuthenticated) {
    // <></>
    // about:blank
    return <div>Unable to log in.</div>
  }
  if (auth.error) {
    return <div>Oops... {auth.error.message}</div>
  }

  return (
    <Layout>
      <BannerConsent></BannerConsent>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Layout>
  )
}
export default App

这是我的 Layout.tsx

import TopBanner from './TopBanner'
import SideBar from './Sidebar'
import Footer from './Footer'
import React from 'react'
import { ProSidebarProvider } from 'react-pro-sidebar'

const Layout = ({ children }: { children: any }) => {
  return (
    <React.Fragment>
      <TopBanner />
      <ProSidebarProvider>
        <SideBar />
        <main>{children}</main>
      </ProSidebarProvider>
      <Footer />
    </React.Fragment>
  )
}
export default Layout

我的页面确实有其他组件，例如 Footer.tsx 和 Topbanner.tsx。

我尝试更改工具提示的位置和位置，还尝试在 SideBar 之外获得一个有效的工具提示。似乎在侧边栏外工作正常，但在 React Pro 侧边栏内却不行。我的预期结果是它应该仅在 SideBar 折叠时显示工具提示，并且工具提示应该在 SideBar 之外，这样它就不会裁剪文本。