Javascript Tooltip / Posts /

how to add datepicker in tooltip

11
Hi
I can't figure out how to add a datepicker (jquery datepicker: http://jqueryui.com/datepicker/) to the tooltip.

The way I create the tooltip contents is by concatenating some strings:
    contents += 'test1' + '<input type="text" id="datepicker" >';

The problem is that I need to attach the actual date picker to my input field with id datepicker:

    $("#datepicker").datepicker();

This doesn't work because contents is not part of the DOM.

Any ideas how to overcome this?
Thanks

Emil  11 years ago   viewed: 10651    

3 Answers

2
Place your date picker within an element on the page, say:
<div style="display:none">     <div id="dpContainer">test 1<input type="text" id="datepicker" /></div> </div>
Then you can specify how the tooltip will be launched from a target element:
<span class="tooltip" onmouseover="tooltip.pop(this, '#dpContainer')"> Hover me </span>
Let me know if it works or not. Thank you.
Milo   11 years ago
0
Thanks that kinda worked... the calendar/date picker shows up but if I go to the calendar, the tooltip dissapears. I tried to dynamically change the tooltips properties (while the tooltip was being dispayed) like this
tooltip.changeOptions({ overlay: 1, position: 1 });
but it didn't work. Is it possible to add a repaint() method to the tooltip?
Emil   11 years ago
-1
With what browser you see this issue? IE9?

I saw you want to change options. You can specify the specific option when you define the onmouseover event:
onmouseover="tooltip.pop(this, '#dpContainer', {overlay:true, position:1})"

I am not sure if you specify another option: relativeTo: 'mouse' will fix your issue?
onmouseover="tooltip.pop(this, '#dpContainer', {overlay:true, position:1, relativeTo: 'mouse'})"
milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲