PDA

View Full Version : Creating new ToolTip without page reload



MarkMan55
28 Apr 2010, 2:03 PM
Hello ExtJS Community,

I am trying to dynamically add a ToolTip without reloading the page. AJAX calls are being made and javascript is updating various parts of the page DOM.

If I initially load the page with ToolTips, then call Ext.QuickTips.init() when the page loads --> all works well (see code snippet below). Apparently QuickTips is a singleton though, so I can not call it again w/o reloading the page.

However, now I need to add new ToolTips based on the AJAX response being received. I was able to get it working with Ext.QuickTips.register, but I need to utilize the robustness of ToolTips.

How can I dynamically add a new Ext.ToolTip to a page without reloading.
Please advise, and thanks for your assistance.




<img id='tooltip123' src='blob.jpg' />
<script>new Ext.ToolTip({ target: 'tooltip123', anchor: 'bottom', anchorOffset: 10, showDelay: 400, hideDelay: 100, trackMouse: true, html: 'testing 123'});</script>

MarkMan55
4 May 2010, 6:49 PM
I found a solution, in case anyone else runs across this issue. Rather than inserting the html tag and script tag into the dom, I actually execute the script.

To be clear, I dynamically place the newly created image tag into the dom, then run the script directly to add the ToolTip.



tempTxt = "<img id='tooltip123' src='blob.jpg' />";
Ext.get("div123").dom.innerHTML = tempTxt;
new Ext.ToolTip({ target: 'tooltip123', anchor: 'bottom', anchorOffset: 10, showDelay: 400, hideDelay: 100, trackMouse: true, html: 'testing 123'});