Hello everyone, I trust you are all doing great. I have a query regarding a Fireship IO tutorial on incorporating TailwindCSS and DaisyUI into React.
I've managed to create a side navbar similar to Discord, complete with tooltips that display as spans when hovered over.
The issue I'm facing is that the tooltips appear below the component located to their right, which happens to be a series of cards provided by DaisyUI.
I've made multiple attempts using Tailwind's custom z-index for the tooltips, card components, and their respective containers, but unfortunately, it hasn't resolved the issue.
Card Component Z Index
<div className="card-body z-[-99999]">
{firstName + " " + lastName}
<h2 className="card-title">{}</h2>
<p>Click the button to listen on Spotiwhy app.</p>
<div className="card-actions justify-center">
<button className="btn btn-primary bg-green-600 hover:bg-green-500 border-transparant ">
Listen
</button>
</div>
</div>
Tooltip Component
const SideBarIcon = ({ icon, text = "tooltip 💡" }) => (
<div className="sidebar-icon group">
{icon}
<span class="sidebar-tooltip group-hover:scale-100 z-[99999]">{text}</span>
</div>
);
Could there be a specific implementation detail that I might be overlooking?
I have the environment set up where I run npm from VS Code and access the application through Firefox.
I'm eager to enhance my understanding of Firebase React design, so any insights would be greatly appreciated.
Cheers,
Tutorial Source Code: https://github.com/fireship-io/tailwind-dashboard
App.js
import "./App.css";
import Landing from "./components/landing";
import SideBar from "./components/sidebar";
function App() {
return (
<div className="App flex">
<SideBar className="z-[99999]" />
<div className="content-main z-[0]">
<Landing className="z-[-99999]" />
</div>
</div>
);
}
export default App;
Landing.js
import { useEffect, useState } from "react";
import { Divider } from "./SpacingComponents";
import axios from "axios";
export const Landing = () => {
// Landing component code...
};
export default Landing;
Sidebar.js
import { BsPlus, BsFillCloudLightningFill, BsGearFill } from "react-icons/bs";
import { FaPoo, FaSun, FaMoon } from "react-icons/fa";
// Sidebar component code...
SpacingComponents.js
export const Divider = () => <div className="divider"></div>;
Index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
// Custom styling and classes...
}
I have utilized Tailwind's custom z-index values extensively, but the issue persists. I have also experimented with the order of the components in the code base.