Customize Tooltips

[ShareDocs]

Hi,

I have 2 questions about Tooltips in Date Picker control:

1.) I blocked some dates with the function of "DisableDates" .
Now, I want to add a tooltip with an error message when the user hovers over the limited dates.
(The allowed dates can remain with the default toolip which dispays their date).

Here is my DatePicker :

 @(Html.Kendo().DatePicker()

                           .HtmlAttributes(new { id = "date1" })
                           .Format("dd/MM/yyyy")
                           .Culture("en-GB")
                           .DisableDates("DisableDatesFunc"))

I tried to find the navigation event between dates as I saw in another post (in the context of a kendo-calendar control) :

   $("#datePicker1").kendoDatePicker({
            navigate: function(e){
                this.element.find("tbody").find("a").removeAttr("title");
            }
        });

But, it didn't work.....

How can I make this customization?

 

2.) I want to add a main tooltip when the user hovers over the icon of the Date Picker, before the control is opened.

What is the best way to do this?

I'll be glad to receive your help,
Elad.

[ShareDocs]

The id in the control and in the function is obviously the same. ("datePicker1"  - not "date1")
The difference is caused by a typing error...

[Viktor Tachev]

Hi Elad,

By default the value that is shown when a date is hovered correspond to the text attribute of the rendered element in the Calendar widget. In order to customize that I can suggest specifying a template for the calendar cells. 

For your convenience I prepared a small example that illustrates the approach. Check it out here.

The setup for the MVC wrapper would look similar to the following:

@(Html.Kendo().DatePicker()
    .Name("datepicker")
    .MonthTemplate("<span title=\"custom text\">#= data.value #</span>")
    .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
)

Regards,
Viktor Tachev
Progress Telerik

[ShareDocs]

Hi Viktor,

Thank you very much for your quick response.
I did as you suggested:
I used the "DisableDates" functionality for the condition of the title and it works fine.

Here is my Code:

 .MonthTemplate("<span title = #= DisableDatesFunc(data.date) ? 'very long custom text' : '' # >#= data.value #</span>")

The only problem is that not all the long text is displayed but only the first word of it ! 
Instead of displaying: "very long custom text" it displays only: "very".

What could be the cause of this problem?

 

Thanks Again, 
Elad

 

 

[Viktor Tachev]

Hi Elad,

I tried to replicate the behavior, however, I was not able to. Please check out the video below that shows the behavior I am observing and let me know if I am missing something. 

• https://www.screencast.com/t/rlKNIVWO51h

In case the behavior persists please send us a runnable sample where it is replicated. This will enable use to examine the issue locally and look for its cause. 


Regards,
Viktor Tachev
Progress Telerik