Customize Tooltips

5 posts, 0 answers
  1. ShareDocs
    ShareDocs avatar
    88 posts
    Member since:
    Oct 2012

    Posted 30 Nov 2017 Link to this post

    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.

  2. ShareDocs
    ShareDocs avatar
    88 posts
    Member since:
    Oct 2012

    Posted 30 Nov 2017 Link to this post

    The id in the control and in the function is obviously the same. ("datePicker1"  - not "date1")
    The difference is caused by a typing error...
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1816 posts

    Posted 01 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. ShareDocs
    ShareDocs avatar
    88 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2017 in reply to Viktor Tachev Link to this post

    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

     

     

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1816 posts

    Posted 06 Dec 2017 Link to this post

    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. 


    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top