Turn off the Antd Datepicker tooltip

I'm using Antd Datepicker in my website. We get an array of numbers representing disabled dates from an external api and show only the dates in the datepicker(no month, year etc). The date selection is for a monthly subscription and the user just selects the day of the month he wants for the money to be deducted from his account, for this purpose we have gone with November 2015 as default value in our datepicker(since it has 1st as a Sunday). Now when a user hovers over the date it shows [DD, November 2015]. I don't want the tool tip to be visible to the user as it creates a bad UX.

<DatePicker
  defaultPickerValue="{moment('2015-11-01')}"
  dropdownClassName="c-datepicker-dropdown"
  disabledDate="{(current) => this.disabledDates(current, this.props.frequency_data)}"
  showToday={false}
  allowClear={false}
  onChange="{(date) => this.handleLogic(date)}"
  style="{{ width: 132 }}"
/>

Here is the codesandbox I want the tooltip onhover to be removed

screenshot

cssreactjsdatepickertooltipantd

Answer №1

With Antd, you can customize how dates are rendered using the dateRender option. I found success by implementing a custom render function.

<DatePicker
          defaultPickerValue="{moment('2015-11-01')}"
          format="Do"
          dateRender="{(current) => this.renderCustomDate(current)}"
          dropdownClassName="c-datepicker-dropdown"
          disabledDate="{(current) => this.disabledDates(current,this.props.frequency_data.MONTHLY)}"
          showToday={false}                                            
          style="{{ width: 132 }}"
          />

This is the custom function I used. (The title is empty to hide the tooltip)

 renderCustomDate(current) {
    return (
      <div className="ant-calendar-date" title="">
        {current.date()}
      </div>
    );
  }

Answer №2

This solution could potentially resolve the problem, however, it appears a bit unattractive due to the flickering of the pointer during hover.

td.ant-calendar-cell {
  cursor: pointer;
}

td.ant-calendar-cell:hover {
  pointer-events: none;
  cursor: pointer;
}

Answer №3

This is not a tooltip, but the title attribute on the <td> element. To turn off this feature, you can follow these steps. This has been tested and proven to work in antd version 5.12.5.

const customCellRender = (current) => {
  return (
    <div title="" className="ant-picker-cell">
      <div title="" className="ant-picker-cell ant-picker-cell-in-view">
        <div title="" className="ant-picker-cell-inner">
          {current.date()}
        </div>
      </div>
    </div>
  );
};

<DatePicker cellRender={customCellRender} picker="day" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide Popover when child component is clicked

In my component, I include a Popover: // HeaderMenu.tsx const HeaderMenu = () => { const ShowMenu = () => { return ( <div className={classes.profile}> <ul> <Notifications /> </ul> ...

reactjsmaterial-ui

Comparison between Jest test coverage and watch mode

When running the command npm test -- --coverage, I notice different results in the summary chart compared to when I run npm test -- --coverage --watch. The version with "watch" enabled only displays 1 total test (related to changed files). However, it als ...

reactjsunit-testingjestjs

Encountering difficulties with setting up a react project

yarn add v1.22.4 [1/4] Resolving packages... info Having some issues with the network connection, trying again... error Unexpected error encountered: "https://registry.yarnpkg.com/react: tunneling socket could not be established, cause=connect ECONNRE ...

reactjsnpmproject

Clicking on Only One Card in Material UI React

I've encountered an issue with my code: const useStyles = makeStyles({ card: { maxWidth: 345, }, media: { height: 140, }, }); export default function AlbumCard(props) { const classes = useStyles(); let ...

javascriptreactjsonclickmaterial-ui

A guide on monitoring SASS files in all subdirectories with an npm script

Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...

cssnpmsassdart-sass

Configuring the data source for an autocomplete feature in ReactJS Material UI

For one of my React components, I am utilizing the Material UI autocomplete feature. The data source is retrieved from the server asynchronously and has the following structure: const dataSource = [{ id: 001 firstName: 'fname', lastName: &apo ...

javascriptreactjsmaterial-ui

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...

htmlcsstypescriptvue.js

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

I have a color picker that triggers the following jQuery script: //event.color.toHex() = hex color code $('#iframe-screen').contents().find('body a').css('color', event.color.toHex()); This script will change the color of al ...

javascriptjquerycssdom

Chaos in the IE8 drop-down menu situation

I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this? <ul id="nav" clas ...

htmlcssdrop-down-menumenuinternet-explorer-8

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Take a look at this: var iconIndex = 0; var icons = ['check', 'chain-broken', 'flag-o', 'ban', 'bell-o']; $('button:eq(0)').click(function() { iconIndex = (iconIndex + 1) % icons ...

javascriptjqueryhtmlcssfirefox

When attempting to access the Next.js 13.5.0 package via the npm registry, the resource was not found

click here to view image error message: The file 'next@https://registry.npmjs.org/next/-/next-13.5.0.tgz' is not found in this registry. An issue has arisen during the deployment on Vercel. It was functioning properly just a short while ago, wi ...

reactjsnpmnext.jsyarnpkgvercel

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

htmlcss

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

Code 'ERR_HTTP_HEADERS_SENT' encountered during an express GET request, while trying to send a response

Encountering a common issue in Express, despite numerous solutions proposed, none have resolved the problem for me. I am making a GET request to my Express server using axios to authenticate users with Firebase. Although everything seems to be functioning ...

reactjsexpressaxiosgetresponse

PHP Retrieve Current Time with AM/PM Display

Can anyone help me figure out how to use PHP to get the current time along with AM/PM indication? The code I have doesn't seem to be working correctly. Here is the code snippet that I am currently using: $format1 = date("G"); // this should give the ...

phphtmlcss

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

Tips for resolving the "Unauthorized 401 error" when accessing JSON data from the back end on a React profile page

My current setup involves utilizing React and Express for this application. React is running on PORT 3000, while Express is running on PORT 3001. Authentication on the Express side is implemented using JWT. Here is an overview of my auth.js service file: ...

reactjsexpressauthenticationjwt

"Displaying <canvas> at its true resolution even when zoomed in, thanks to Retina technology

I am currently working with a <canvas> element to create vector graphics and I want to ensure that it displays in the highest quality possible while using minimal resources across various viewing conditions. Specifically, I aim to achieve a 1:1 mappi ...

csshtmlcanvaszoomingretina-display

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: However, I have come across the md-input-content tag, which occupies less ...

javascriptcssangularjshtmlangular-material

How can you switch focus in a React class component by pressing the Enter key?

I'm new to coding in React and I have created a Login Page like this: class Login extends React.Component { constructor(props) { super(props); this.state = { username: null, password: null, } ...

reactjsmaterial-ui