Jquery Datepicker beforeShowDay not displaying tooltip and not assigning class in return

Question

I'm trying to color the background of certain days in an embedded datepicker (not in an input field) and fire a tooltip on hover on those same colored days but is not doing anything. I checked in the console and the tooltips messages are there but not in the calendar, and also the background color is not been applied. I tried just applying a background color without the tooltip using only 'return {Classes: "activeClass"}' and it works but is not what I need. Any help is very much appreciated.

The date arrays and text for the tooltips are been generating with PHP.

Here is my code:

    <style>
        .activeClass{
            color: #fff;
            background-color: #339966; 
        }        
    </style>

    <script>
        var active_dates = ["4/10/2022", "5/1/2022", "5/29/2022", "6/26/2022", "7/10/2022", "7/24/2022", "8/7/2022", "8/21/2022", "9/11/2022", "9/25/2022", "10/9/2022", "10/16/2022", "11/6/2022", "12/25/2022", ]; 
        var tooltips = [];
        tooltips[new Date('4/10/2022')] = 'DBL: 1689.00/ TWN: 1689.00'; tooltips[new Date('5/1/2022')] = 'DBL: 1729.00/ TWN: 1729.00'; tooltips[new Date('5/29/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('6/26/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('7/10/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('7/24/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('8/7/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('8/21/2022')] = 'DBL: 1799.00/ TWN: 1799.00'; tooltips[new Date('9/11/2022')] = 'DBL: 1729.00/ TWN: 1729.00'; tooltips[new Date('9/25/2022')] = 'DBL: 1729.00/ TWN: 1729.00'; tooltips[new Date('10/9/2022')] = 'DBL: 1689.00/ TWN: 1689.00'; tooltips[new Date('10/16/2022')] = 'DBL: 1689.00/ TWN: 1689.00'; tooltips[new Date('11/6/2022')] = 'DBL: 1689.00/ TWN: 1689.00'; tooltips[new Date('12/25/2022')] = 'DBL: 1689.00/ TWN: 1689.00';  
        var date = new Date();
        date.setDate(date.getDate()+1);
        $('#date_pick').datepicker({     
            showOtherMonths: true,
            selectOtherMonths: true,
            startDate: date,
            format: 'mm/dd/yyyy',
            todayHighlight: false,
            beforeShowDay: function(date){
                var d = date;
                var curr_date = d.getDate();
                var curr_month = d.getMonth() + 1; //Months are zero based
                var curr_year = d.getFullYear();
                var formattedDate = curr_month + "/" + curr_date + "/" + curr_year
                if ($.inArray(formattedDate, active_dates) != -1){

                    var tooltip = tooltips[date]; 
                    return [true, "activeClass",tooltip],
                    console.log(tooltip);

                }
                return;
            }
        });
    </script>

Answer 1

You have a , at the end of the return [true, "activeClass",tooltip] line instead of a ;. First fix that as it may cause the issue...