Component (tooltip) priority over other component(s)

Please note that I am using React.

I am trying to add a tooltip to the ".preview" component which is basically a little box with a letter in it (the little boxes represents the days of the week, although this is not important).

The tooltip shows as expected but it gets shown behind the footer text.

Image of the problem

ClassCard.jsx

<div className={`card ${isCardOpen ? 'active' : ''}`} onClick={toggleCard}>
    <header className="card-header">
        <div className="image-container">
            <img src={card_image} alt="image" />
            <a className="card-number">{number}</a>
        </div>
    </header>
    { name ? <p className="card-name">{name}</p> : <p className="placeholder card-name">Undefined</p> }
    <div className="card-body">
        { teacher && (<p className="card-teacher">{teacher} { teacherOffice && `- (${teacherOffice})`}</p>)}
        { schedule && (<div className="schedule-container">
            <p className="card-schedule-title">Horaire:</p>
            <div className="card-schedule-preview">
                { Object.keys(schedule).map(day => (
                <div className={`preview ${isNull ? 'empty' : ''}`}>
                    <a>{button_text}</a>
                    {!isNull && <div className="tooltip preview-tooltip">
                        <span>Heure : {hover_text.time}</span>
                        <span>Local : {hover_text.local}</span>
                    </div>
                    }
                </div>
            </div>
        </div>) }
    </div>
    <div className="card-footer">
        <FontAwesomeIcon icon={faClock}></FontAwesomeIcon>
        <span className="card-footer-text">Prochain travail dû dans {workTime}</span>
    </div>
</div>

ClassCard.css

.card {
    position: relative;
    width: 300px;
    height: 167px;
    margin: 10px 10px 90px;
    background-color: white;
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    transition: height 0.6s, width 0.6s, margin 0.6s;
}

.card-header {
    overflow: hidden;
    border-bottom: 2px solid #f2f2f2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    & img {
        width: 100%;
        display: block;
        transition: transform 0.4s ease;
    }
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 45px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    transition: 0.4s;
}

.card-name {
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 7px 7px 18px;
}

.card-body {
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: transform 0.2s, opacity 0.2s;
}

.card-teacher {
    padding-left: 10px;
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.card-schedule-title {
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.schedule-container {
    display: flex;
    margin: 10px 10px 22px;
    align-items: center;
}

.card-schedule-preview {
    display: flex;
}

.card-footer {
    position: absolute;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
    transition: transform 0.6s;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.card-footer-text {
    margin: 0 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card:hover {
    height: 249px;
    width: 310px;
    margin: 5px 5px 10px;

    .card-number {
        font-size: 55px;
        text-shadow: 2px 7px 5px rgba(100,100,100,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    }

    .card-header img {
        transform: scale(1.15);
    }

    .card-body {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.2s;
        transition: transform 0.4s, opacity 1s;
    }

}

.preview {
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 7px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border: 2px solid #f2f2f2;
    font-family: 'Museo', sans-serif;
    transition: 0.3s;
}

.preview-tooltip span {
    display: block;
}

.preview.empty {
    background-color: #f2f2f2;
}

.preview:hover > .preview-tooltip {
    display: block;
}

.preview:not(.empty):hover {
    background-color: #08a45c;
    color: white;
}

.tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    background-color: white;
    color: #5a616e;
    padding: 5px;
    width: auto;
    white-space: nowrap;
    box-shadow: 0 0 5px #f2f2f2;
    display: none;
    font-size: small;
    font-family: 'Museo', sans-serif;
}

This is due to the fact that the .cardfooter has it's position set to "absolute". Setting it's position to "static" fixes my issue. However, now the component (the footer) cannot move when the card expends when I hover over it. I need it to be absolute so that I can "transform" it.

I will gladly take any idea! Thank you in advance!

Solution

set card-body z-index must be over than card-footer z-index value

.card-body {
    z-index: 2;
}
.card-footer {
    z-index: 1;
}

This might be works...

Result: