how to make title (tooltip) button in date picker

Hello,
I want to display information on date picker when it is highlighted. can you help me to display it like the following picture.

Untitled.png

Hello ,

You can apply this CSS:

.is-selected .pika-button {

background: var(--color-blue-lightest);

border-radius: var(--border-radius-circle);

color: var(--color-red);


}

Hope it helps.

Best Regards,

Nuno R

Hello Rifaldi Adrian,

Do you want that the date picker look exactly as the one on the attached image? If yes there is a lot of work in CSS to do, but is possible.

If you want just to change the CSS from the current day, you can use this code:

.is-today .pika-button {
    background-color: transparent;
    border: var(--border-size-s) dashed var(--color-red);
    border-radius: var(--border-radius-circle);
}

Check this link to see the result:

https://personal-gxzlvs5j.outsystemscloud.com/DatepickerTest/

Hope it helps,

Nuno Rodrigues

Great Work, big thanks Nuno Rodrigues!


then, I also want to display holiday information (wafat isa al masih) in a box like the picture above. 

Hello ,

You can apply this CSS:

.is-selected .pika-button {

background: var(--color-blue-lightest);

border-radius: var(--border-radius-circle);

color: var(--color-red);


}

Hope it helps.

Best Regards,

Nuno R

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.