Question 266217 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Add custom toolltip to the Antd datepicker dates

I am using antd date picker in my react application. I want to show a custom message while hovering or clicking on the dates. but it is not working as expected, the tooltip is not showing while hovering over the dates

import React from 'react';
import { DatePicker, Space, Tooltip } from 'antd';

const App = () => {
  const renderDatePickerCell = (date) => {
    return <Tooltip title="prompt text">
      <span>{date.date()}</span>
    </Tooltip>
  };
  const onChange = (date, dateString) => {
    console.log(date, dateString);
  };

  return (
    <Space direction="vertical">
      <DatePicker onChange={onChange} cellRender={renderDatePickerCell} />
    </Space>
  );
};

export default App;
Tags:

2

Answers


  1. 0

    To show a tooltip when hovering over the dates, you can’t directly use the Tooltip component as a child of the span. Instead, you should use CSS to apply the tooltip effect.

    You can achieve this by defining a CSS class for the tooltip and applying it to your date cells.

    import React from 'react';
import { DatePicker, Space } from 'antd';
import './App.css'; // Import your CSS file

const App = () => {
  const renderDatePickerCell = (date) => {
    return (
      <span className="custom-tooltip">
        {date.date()}
        <span className="tooltip-text">prompt text</span>
      </span>
    );
  };

  const onChange = (date, dateString) => {
    console.log(date, dateString);
  };

  return (
    <Space direction="vertical">
      <DatePicker onChange={onChange} cellRender={renderDatePickerCell} />
    </Space>
  );
};

export default App;

    In your CSS file (e.g., App.css), you can define the styles for the tooltip effect:

    .custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.custom-tooltip:hover .tooltip-text {
  visibility: visible;
}

    This CSS code creates a custom tooltip that is initially hidden (with visibility: hidden) and becomes visible when you hover over the date cell.

    Login or Signup to reply.
  2. 0

    Following antd custom cell rendering docs you can show tooltips in every day/date option in picker using useCallback hook:

    const cellRender = React.useCallback((
  current: number | Dayjs, 
  info: CellRenderInfo<Dayjs>
) => {
  if (info.type !== "date") {
    return <Tooltip title="prompt text">{info.originNode}</Tooltip>;
  }

  if (typeof current === "number") {
    return (
      <Tooltip title="prompt text">
        <div className="ant-picker-cell-inner">{current}</div>
      </Tooltip>
    )
  }

  return (
    <Tooltip title="prompt text">
      <div className="ant-picker-cell-inner">{current.date()}</div>
    </Tooltip>
  )
}, [])

...

<DatePicker cellRender={cellRender} />

    You can find a working example here.

    OBS: If you don’t add className="ant-picker-cell-inner" your tooltips will not show.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search