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>
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>