How to setup a tooltip in latest version #1061

import React, { useState } from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import "./style.css";
import sliderImg from "@/assets/images/png/slider_texture.png";

// TimeSlider.jsx
const TimeSlider = () => {
    const [availableRange, setAvailableRange] = useState([0, 1440]);
    const [awayRange, setAwayRange] = useState([480, 1020]);

    const minutesToTime = (mins) => {
        const hours = Math.floor(mins / 60);
        const minutes = mins % 60;
        const ampm = hours >= 12 ? 'PM' : 'AM';
        const formattedHour = hours % 12 || 12;
        return `${formattedHour}${ampm}`;
    };
    const trackStyle = [{
        backgroundColor: "#d6a94a",
        backgroundImage: `url(${sliderImg})`,
        height: "22px"
    }];

    const sliderChange = (data) => {
        console.log("data", data)
        setAwayRange(data)
    }

    
    return (
        <div>
            <h3>AVAILABLE</h3>
            <Slider range 
                min={availableRange[0]}
                max={availableRange[1]}
                step={60}
                value={awayRange}
                // defaultValue={[3, 10]} 
                onChange={(data) => sliderChange(data)}
                trackStyle={trackStyle}
            />
            <br></br>
            <br></br>
            <p>{minutesToTime(availableRange[0])} - {minutesToTime(availableRange[1])}</p>
        </div>
    );
};

export default TimeSlider;