Struggling to incorporate z-index for a tooltip component that overlaps in a project utilizing React, Tailwind, and DaisyUI

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.

Answer â„–1

Eliminate the shadow-xl effect on your card elements

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to create a full screen notification similar to WhatsApp call on React Native Android platform

Currently, I am working on integrating a notification system that can display full-screen notifications, even on the lock screen similar to a WhatsApp call using React Native for Android and OneSignal. Unfortunately, I have been unable to find a reliable ...

Searching for a solution on how to retrieve data server-side in the newest version of Next.js? Attempted to use getStaticProps but encountering issues with it not executing

Currently tackling a project involving Django Rest Framework with Next.js, and encountering a roadblock while trying to fetch data from the API. Data is present at the following URL: http://127.0.0.1:8000/api/campaigns, visible when accessed directly. The ...

Typescript: Securing Data with the Crypto Module

I am currently working on encrypting a password using the built-in crypto module. Previously, I used createCipher which is now deprecated. I am wondering if there is still an effective way to achieve this. Here is the old code snippet: hashPassword(pass: ...

Having difficulty with removing outdated NPM packages that may not be in use anymore

I'm currently in the process of reviving an ASP.net project that uses React. While I successfully cleaned up the package.json, I've encountered some challenges with removing two packages that are not utilized in the project nor listed in the pack ...

Is it possible for me to move a function into a utils file and then incorporate it into a React component, all while passing a function from the component to it?

I'm in the process of moving my getFontColor() function to a utils folder in order to call it from a component. However, this function relies on another function within the component (getBgColor()). How can I pass getBgColor to the util function and t ...

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

Tips for utilizing a slider as a transformation tool over an image for seamless replacement with alternative images

I'm looking to create an image "slider" that reveals the image underneath when the user grabs the handle and drags it. Check out this example: http://jsfiddle.net/M8ydk/1/ In the provided example, the user can grab the handle and move it on the slid ...

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

Utilize React hooks to manage state efficiently

I am in need of updating a specific value within a nested object inside my state. To achieve this, I plan to create a clone of the current state with the addition of the new value that requires modification. The structure of my state is as follows: { ...

Is the ajax success function failing to work properly in JavaScript?

Although I've searched extensively on Stack Overflow, none of the similar questions seem to solve my issue. The problem I'm facing is that the success function is not triggering the alert message and I can't seem to figure out why. <form ...

Items plummeting below the surface plane within cannon.js and three.js

I've recently delved into the world of physics engines, specifically utilizing cannon-es.js alongside three.js. However, I've encountered a challenge where the box and loaded model are simply passing through the plane and disappearing from view. ...

Create a unique type in Typescript that represents a file name with its corresponding extension

Is there a way for me to specify the type of a filename field in my object? The file name will consist of a string representing the name of the uploaded file along with its extension. For instance: { icon: "my_icon.svg" } I am looking for a ...

Is it possible to create a compound editor within a cell in SlickGrid that contains two date fields

Currently, I am implementing SlickGrid with jQuery and I am interested in incorporating a compound editor within a cell similar to example 3a mentioned here. However, instead of two text fields, I would like to have two date fields. Although Example 3 dem ...

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...

React-Query: executing a function after updating query data

After updating the cache in a form, triggered by a response from the server, I utilize setQueryData. However, following this cache update, my goal is to refocus on the form input field. Here are some details: Within my React application, I employ Recoil. ...

Tips on deobfuscating Next.js HTML from online sources

I am faced with the task of reconstructing a website that I scraped from the internet using wget. It seems to be built on next js, based on the presence of the _next folder. Even though I have no experience with nextjs and do not understand its inner worki ...

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

Utilizing Asynchronous Functions within a Loop

I have a situation where I am working with an array and need to make API calls for each index of the array. Once the API call is resolved, I need to append the result in that specific element. My goal is to ultimately return the updated array once this pro ...

Error: Could not find the path to 'firebase' in 'srccontainersLogin.js'

I encountered an issue when trying to execute the exp start command. Can anyone guide me on resolving this error? Here is a snippet of my login.js file. I am relatively new to React Native and using JavaScript to develop a native app with Expo, which has ...

Is it a suboptimal method to repeatedly use order.find, collect data, and transmit a substantial data payload to the front end in

Currently, I am working with Express, React, and MongoDB but I am relatively new to using express and REST API. My goal is to add an analytics feature to my frontend that focuses on sales and orders. The plan is to allow users to search within a specified ...