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

Tips for making a hide and reveal FAQ section

Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality p ...

javascriptjqueryhtmlcss

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

Achieve vertical alignment of a span text that spans multiple lines within an inline-block element

I am facing an issue with this code as the phrase "lorem ipsum" is not positioned in the center of its parent div: <div style="width: 500px; height: 500px; background-color: #f0f0f0"> <div style="display: inline-block; width: 100px; height: 1 ...

htmlcss

What methods do you use to gather user inputs and transmit them to a server?

I've been struggling to find information online about how to capture user input and submit the data through a POST request to a server, even though this may have already been answered. Currently, I am working with Material UI, React, and JavaScript t ...

javascriptreactjsmaterial-ui

I am having trouble getting Google Maps to load

Why does the map on my website only load when the browser window is resized? Below is the JavaScript code being used: <div class="map-cont"> <div id="map" class="location-container map-padding" style="width:100%;height:400px;background:y ...

javascripthtmlcssgoogle-maps

Do these two Material-UI import approaches differ in any way?

While working with material-ui, I've been following the guidelines and importing components using the method shown below: import Dialog from '@material-ui/core/Dialog'; import DialogTitle from '@material-ui/core/DialogTitle'; impo ...

reactjsmaterial-ui

What is the process for incorporating CSS, JavaScript, and images into a Django project?

Within the static folder, I have created a CSS file called resume.css with the following structure: static css resume.css In my settings.py file, I did not make any changes to the static code. I have referenced the index.html file in my vie ...

pythonhtmlcssdjangodjango-static

Shrink Table Column Size with Bootstrap and Stylus to Optimize Space Usage

Currently experimenting with Bootstrap to ensure my table is responsive on a search list I am developing. However, I am facing an issue where two of my columns are taking up more space than necessary. In the image below, you can see that Date and Link colu ...

htmlcssangularjstwitter-bootstrapstylus

Opacity filter malfunctioning

It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only norm ...

cssinternet-explorer-8opacity

What is the best way to incorporate CSS into an Angular 4 project?

I'm struggling to figure out how to import CSS into my app component. All the information I find on Google seems to lead me in different directions... Within my component, I have defined: @Component({ styleUrls: ['../css/bootstrap.min.css&ap ...

cssangularbootstrap-4

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

javascriptcssreactjsmaterial-ui

Having trouble establishing a connection to the back-end server with minikube

I am currently facing an issue with deploying an application in minikube locally. While I can successfully connect to the front-end when minikube is running, I encounter connectivity problems with the back end. Below are the yaml files that I am using: I ...

node.jsreactjskubernetesminikubekubernetes-ingress

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

The Font Awesome icons do not display offline

I'm having trouble using Font Awesome icons offline on my webpage. I've included the necessary code, but for some reason it's not working. Here is what I have: <html> <head> <title>font-awesome example</title> ...

htmlcssfont-awesome

What steps can be taken to remove the search parameter responsible for the error?

Imagine having a webpage that displays search results based on the parameters in the URL, like this: https://www.someurl.com/categories/somecategory?brands=brand1,brand2,brand3 This URL will show listings for only brand1, brand2, and brand3. Additionally ...

javascriptreactjsreact-routerreact-router-v4

Tips for building a homepage button with an image and text using HTML and CSS

My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the ...

htmlcssstretching

After the upgrade to Material UI 4, I encountered an issue with the withStyles feature that is causing errors

After updating to MUI v4.0.2 from v3.9.x, I encountered this error: The function returned by connect requires a component to be passed. However, {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["x ...

reactjsmigrationmaterial-ui

How to integrate SCSS into Next.js for enhanced styling capabilities?

editing the issue : __app instead of _app. I'm feeling a bit lost with my current problem. I'm trying to implement SCSS in my React/Next.js application but nothing seems to be working. I have installed the following packages: yarn add node-sas ...

reactjssassnext.js

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...

javascripthtmlcssspring-boot

Utilizing a singular component from Material UI

I'm in need of a Stepper component and the best option I came across was the MUI one. However, my app is built with react-bootstrap and I do not have MUI. I stumbled upon a post (Is it possible to install a package that contains only one component of ...

reactjsnpmmaterial-uicomponentsstepper