Title content doesn't change

[Nir]

I need to display a tool tip over every date picker in my system
The tooltip displays the date in a Hebrew notation 
Therefor I need to set the content of the tooltip dynamically as a function of the date picker value

I tried setting a dynamic content to a tooltip but failed. It looks like the content is set on first display.

1.  Please see my code. What am I Doing wrong?
2.  Is there a way to attach the tooltip to the date picker instead of its “input” element?
3.  How can I extend this behavior to all date pickers not having to rewrite this code

<div id="tooltip" class="k-rtl" style="width:150px;border:1px solid red">
            <input id="datepicker" value="10/10/2011" style="width:150px;" />
 </div>
 <script>

        $(document).ready(function() {
            dp = $("#datepicker").kendoDatePicker({});
            var tooltip = $("#tooltip").kendoTooltip({
                 animation: {
                   close: {
                        effects: "fade:out",
                        duration: 500
                   },
                    open:{
                       effects: "fade:in",
                       duration: 500
                    }
                },

                autoHide: true,       
                showAfter: 1000,
               position: "left",               
                filter: "input",
               width: 300,       
               content: function (e) { return dp.data("kendoDatePicker").value() }
            }).data("kendoTooltip");

            //this row doesnt help  
             dp.change= function(){tooltip.content( dp.data("kendoDatePicker").value())}
        });

        //this row does alert the correct value        
         $(document).dblclick(function () { alert(dp.data("kendoDatePicker").value()) });

    </script>

[Dimo]

Hello Nir,

There are two major problems in the provided code.

1. Kendo UI event handlers can be attached in two ways, which are described in our documentation:

http://docs.kendoui.com/getting-started/widgets#subscribing-to-the-events-of-a-kendo-ui-widget

2. The tooltip does not have a content() method. You can change the content like this:

2a) If the Tooltip has NOT been opened, then its content can be set via:

$("#ID").data("kendoTooltip").options.content = ".........";

2b) If the Tooltip has been opened at least once, then its content is accessible via:

$("#ID").data("kendoTooltip").popup.wrapper.find(".k-tooltip-content").html("........");

In case 2a) the popup property will be undefined.
 
 
Regards,
Dimo
Telerik

[Nir]

Thank Dimo

I changed my code like this

dp = $("#datepicker").kendoDatePicker({
    change : function(){
           if(tooltip.popup)
                     tooltip.popup.wrapper.fing(".k-tooltip-content").html(dp.data("kendoDaePicker").value())
            else
                      tooltip.content = dp.data("kendoDatePicker").value()
    }
});

It works fine.

but How can I make this common behavior for every date picker
not having to place a tooltip and implement the change event for each date picker

Thanks

[Dimo]

Hello Nir,

You have a couple of options:

1. Create a custom Kendo UI widget, which binds a change event handler automatically during initialization.

http://docs.kendoui.com/howto/create-custom-kendo-widget

2. Encapsulate the DatePicker creation in your own custom function, which attaches the event handler automatically.

Regards,
Dimo
Telerik