show tooltip when hover day on the react-calendar

Question

I used react-calendar package in my ReactJs project. and I customized the calendar like this CSS styles

.react-calendar {
  background-color: white;
  border: none;
  padding: 10px;
}

.sunday-dot {
  width: 4px;
  height: 4px;
  background-color: #bc0000;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 5px;
}

.saturday-friday-dot {
  width: 4px;
  height: 4px;
  background-color: #ffc700;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 5px;
}

.react-calendar__tile {
  position: relative;
  width: 47px;
  height: 47px;
  line-height: 50px; /* Adjust line-height to vertically center content if needed */
}

.tile {
  color: #787878;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  @apply font-poppins;
}

.react-calendar__tile--now,
.react-calendar__tile--active {
  border-radius: 50%;
  background: linear-gradient(132deg, #bc0000 3.86%, #ffc700 99.41%);
  color: white;
}

.react-calendar button:enabled:hover {
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #bc0000, #ffc700) border-box;
  border-radius: 50em;
  border: 2px solid transparent;
}

.tooltip {
  visibility: hidden;
  width: auto;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  position: absolute;
  padding: 5px;
  z-index: 100;
  top: -20px; /* Position it above the Sunday dot */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}

and also my component that I called react-calendar component is :

"use client";
import React, { useState } from "react";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
import "./styles.css";
import Backdrop from "@/app/components/ui/backdrop/backdrop";
import useCalendar from "@/app/utils/hooks/zustandHooks/useCalendar";

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

export default function ChooseDate() {
  const { onClose: closeCalendar, setDate, currentDate } = useCalendar();
  const [value, onChange] = useState<Value>(new Date());

  const isSunday = (date: any) => {
    return date.getDay() === 0;
  };

  const isSaturday = (date: any) => {
    return date.getDay() === 6;
  };

  const isFriday = (date: any) => {
    return date.getDay() === 5;
  };

  const tileContent = ({ date, view }: any) => {
    if (view === "month" && isSunday(date)) {
      return (
        <>
          <div className="tooltip">fl</div>
          <div className="sunday-dot"></div>
        </>
      );
    } else if (view === "month" && (isSaturday(date) || isFriday(date))) {
      return <div className="saturday-friday-dot"></div>;
    }
    return null;
  };

  const handleCloseCalendar = () => {
    closeCalendar();
  };

  const handleDateChange = (date: Date) => {
    // Format the selected date in the "25 Sep 2023" format
    const formattedDate = date.toLocaleString("en-US", {
      day: "numeric",
      month: "short",
      year: "numeric",
    });
    setDate(formattedDate);
  };

  return (
    <Backdrop>
      <Calendar
        tileClassName="tile"
        tileContent={tileContent}
        onClickDay={() => handleCloseCalendar()}
        onChange={(date: any) => handleDateChange(date)}
        value={value}
      />
    </Backdrop>
  );
}

Now I want to show a tooltip on top of the day's button(tile) Note:(not inside the day's button). I also declared .tooltip CSS style in styles.css and created a tileContent for showing a dot in the day tile and also declared my tooltip div inside the tileContent.and show the tooltip when added this CSS

.react-calendar button:hover .tooltip {
  visibility: visible;
}

but the tooltip shows on the tile box not outside of the tile how can I have tooltip outside the tile