From 55f2a7088284153e1465e7476641ba757078c779 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Tue, 17 Mar 2026 15:34:56 +0530
Subject: [PATCH 1/3] fix: Remove the redundant tooltip displayed on hovering
 the holiday

- Removed holiday from title.
- Retained holiday tooltip only in the hover tooltip.
- Updated tests to reflect changes in title to tooltip text for better clarity.

Closes #6260
---
 src/day.tsx                | 97 ++++++++++++++++++--------------------
 src/test/day_test.test.tsx | 20 ++++----
 2 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/src/day.tsx b/src/day.tsx
index 28a16c477..04c8c9a75 100644
--- a/src/day.tsx
+++ b/src/day.tsx
@@ -484,33 +484,27 @@ export default class Day extends Component<DayProps> {
     return `${prefix} ${formatDate(day, "PPPP", this.props.locale)}`;
   };
 
+  getHolidayTitle = () => {
+    const { day, holidays } = this.props;
+    const compareDt = formatDate(day, "MM.dd.yyyy");
+    return holidays?.has(compareDt)
+      ? holidays.get(compareDt)?.holidayNames.join(", ")
+      : "";
+  };
+
   // A function to return the holiday's name as title's content
   getTitle = () => {
-    const { day, holidays = new Map(), excludeDates } = this.props;
-    const compareDt = formatDate(day, "MM.dd.yyyy");
-    const titles = [];
-    if (holidays.has(compareDt)) {
-      titles.push(...holidays.get(compareDt).holidayNames);
-    }
-    if (this.isExcluded()) {
-      titles.push(
-        excludeDates
-          ?.filter((excludeDate) => {
-            if (excludeDate instanceof Date) {
-              return isSameDay(excludeDate, day);
-            }
-            return isSameDay(excludeDate?.date, day);
-          })
-          .map((excludeDate) => {
-            if (excludeDate instanceof Date) {
-              return undefined;
-            }
-            return excludeDate?.message;
-          }),
-      );
-    }
-    // I'm not sure that this is a right output, but all tests are green
-    return titles.join(", ");
+    const { day, excludeDates } = this.props;
+
+    return this.isExcluded()
+      ? excludeDates
+          ?.flatMap((excludeDate) =>
+            !(excludeDate instanceof Date) && isSameDay(excludeDate?.date, day)
+              ? excludeDate?.message
+              : [],
+          )
+          .join(", ")
+      : "";
   };
 
   getTabIndex = () => {
@@ -588,31 +582,32 @@ export default class Day extends Component<DayProps> {
       : getDate(this.props.day);
   };
 
-  render = () => (
+  render = () => {
+    const holidayTitle = this.getHolidayTitle();
     // TODO: Use <option> instead of the "option" role to ensure accessibility across all devices.
-    <div
-      ref={this.dayEl}
-      className={this.getClassNames(this.props.day)}
-      onKeyDown={this.handleOnKeyDown}
-      onClick={this.handleClick}
-      onMouseEnter={
-        !this.props.usePointerEvent ? this.handleMouseEnter : undefined
-      }
-      onPointerEnter={
-        this.props.usePointerEvent ? this.handleMouseEnter : undefined
-      }
-      tabIndex={this.getTabIndex()}
-      aria-label={this.getAriaLabel()}
-      role="gridcell"
-      title={this.getTitle()}
-      aria-disabled={this.isDisabled()}
-      aria-current={this.isCurrentDay() ? "date" : undefined}
-      aria-selected={this.isSelected() || this.isInRange()}
-    >
-      {this.renderDayContents()}
-      {this.getTitle() !== "" && (
-        <span className="overlay">{this.getTitle()}</span>
-      )}
-    </div>
-  );
+    return (
+      <div
+        ref={this.dayEl}
+        className={this.getClassNames(this.props.day)}
+        onKeyDown={this.handleOnKeyDown}
+        onClick={this.handleClick}
+        onMouseEnter={
+          !this.props.usePointerEvent ? this.handleMouseEnter : undefined
+        }
+        onPointerEnter={
+          this.props.usePointerEvent ? this.handleMouseEnter : undefined
+        }
+        tabIndex={this.getTabIndex()}
+        aria-label={this.getAriaLabel()}
+        role="gridcell"
+        title={this.getTitle()}
+        aria-disabled={this.isDisabled()}
+        aria-current={this.isCurrentDay() ? "date" : undefined}
+        aria-selected={this.isSelected() || this.isInRange()}
+      >
+        {this.renderDayContents()}
+        {!!holidayTitle && <span className="overlay">{holidayTitle}</span>}
+      </div>
+    );
+  };
 }
diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx
index 8f8edeb86..d657c70d3 100644
--- a/src/test/day_test.test.tsx
+++ b/src/test/day_test.test.tsx
@@ -1820,8 +1820,8 @@ describe("Day", () => {
     });
   });
 
-  describe("title", () => {
-    it("should have the correct title if date is from holiday list", () => {
+  describe("Holiday Tooltip", () => {
+    it("should have the correct tooltip text if date is from holiday list", () => {
       const day = new Date(2023, 11, 25);
       const holidays = new Map([
         [
@@ -1843,10 +1843,12 @@ describe("Day", () => {
       const container = renderDay(day, {
         holidays: holidays,
       });
-      expect(container.innerHTML.indexOf('title="Christmas"')).not.toBe(-1);
+
+      const tooltipText = container.querySelector(".overlay")?.textContent;
+      expect(tooltipText).toBe("Christmas");
     });
 
-    it("uses both the holiday names for a given date as the title", () => {
+    it("uses both the holiday names for a given date as the tooltip text", () => {
       const day = new Date(2023, 7, 15);
       const holidays = new Map([
         [
@@ -1868,12 +1870,11 @@ describe("Day", () => {
       const container = renderDay(day, {
         holidays: holidays,
       });
-      expect(
-        container.innerHTML.indexOf('title="Holiday 1, Holiday 2"'),
-      ).not.toBe(-1);
+      const tooltipText = container.querySelector(".overlay")?.textContent;
+      expect(tooltipText).toBe("Holiday 1, Holiday 2");
     });
 
-    it("should have the title as empty string if date is not from holiday list", () => {
+    it("should have the tooltip text as empty string if date is not from holiday list", () => {
       const day = new Date(2023, 7, 14);
       const holidays = new Map([
         [
@@ -1895,7 +1896,8 @@ describe("Day", () => {
       const container = renderDay(day, {
         holidays: holidays,
       });
-      expect(container.innerHTML.indexOf('title=""')).not.toBe(-1);
+      const tooltip = container.querySelector(".overlay");
+      expect(tooltip).toBeNull();
     });
   });
 });

From ae89e36426b672b87ffce5db5928c9e9623e21b8 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Tue, 17 Mar 2026 15:48:16 +0530
Subject: [PATCH 2/3] fix: adjust overlay position of holiday overlay for
 better UX

- Updated the bottom position of the overlay to ensure proper alignment.
---
 src/stylesheets/datepicker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 57b8445f9..4e9951070 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -512,7 +512,7 @@ h2.react-datepicker__current-month {
 
     .overlay {
       position: absolute;
-      bottom: 100%;
+      bottom: calc(100% + 2px);
       left: 50%;
       transform: translateX(-50%);
       background-color: #333;

From bd7842a23384f5f50926893ce5088ce8245f3726 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Tue, 17 Mar 2026 15:49:28 +0530
Subject: [PATCH 3/3] refactor: Update holiday dates in the doc-sites to use
 the current year dynamically

- Changed the initialization of selectedDate to use the current date.
- Updated holiday dates to reflect the current year instead of hardcoded values.
---
 docs-site/src/examples/ts/holidayDates.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs-site/src/examples/ts/holidayDates.tsx b/docs-site/src/examples/ts/holidayDates.tsx
index e8a091f68..90013a1fa 100644
--- a/docs-site/src/examples/ts/holidayDates.tsx
+++ b/docs-site/src/examples/ts/holidayDates.tsx
@@ -4,14 +4,18 @@ type Holiday = {
 };
 
 const HolidayDates = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  const today = new Date();
+  const [selectedDate, setSelectedDate] = useState<Date | null>(today);
 
   const holidays: Holiday[] = [
-    { date: "2023-08-15", holidayName: "India's Independence Day" },
-    { date: "2023-12-31", holidayName: "New Year's Eve" },
-    { date: "2023-12-25", holidayName: "Christmas" },
-    { date: "2024-01-01", holidayName: "New Year's Day" },
-    { date: "2023-11-23", holidayName: "Thanksgiving Day" },
+    {
+      date: `${today.getFullYear()}-03-15`,
+      holidayName: "India's Independence Day",
+    },
+    { date: `${today.getFullYear()}-12-31`, holidayName: "New Year's Eve" },
+    { date: `${today.getFullYear()}-12-25`, holidayName: "Christmas" },
+    { date: `${today.getFullYear()}-01-01`, holidayName: "New Year's Day" },
+    { date: `${today.getFullYear()}-11-23`, holidayName: "Thanksgiving Day" },
   ];
 
   return (