Make it AJAX-compatible or callback function for content

[digitalhitler]

There is a hundreds of tooltips plugins on this planet and only one or two support this. Its good idea to make possible edit content that will be displayed while ajax request processing.

Btw, thanks for hover intent :)

[stevenbenner]

AJAX support is still on the "maybe" pile. But so far there hasn't really been a need since it isn't all that difficult to implement AJAX content with a little code. There have been a couple requests for built-in AJAX content support, so I wouldn't be opposed to adding it if I can figure out a way that really makes sense.

Right now there are a few questions about how best to build an AJAX system into PowerTip that works for everyone.

• Should AJAX content be cachable?
• What is the best way to do a loading indicator? I really don't want to include images that most people will never use in the project.
• What should the tooltip do if the AJAX content returned is huge? Someone, somewhere, will eventually try to load a 10000x10000 pixel image via AJAX. I can also foresee big ASP.NET error pages being returned for AJAX requests.
• What should the tooltip do if there is an error loading the content?
• Should there be custom timeouts? If so, what should the tooltip do if the request times out?
• Should there be support for content strings via JSON and/or JSONP? If so, what should that spec be?
• Etcetera

It's not impossible at all, but it is a project that takes some time and thought to get it right.

As for a callback function, PowerTip does fire several events during the tooltip life cycle that you can bind to.

What exactly are you trying to do? If you just need a simple way to load some content via an AJAX request when the tooltip opens let me know and I'll make a example for you. If it's more complicated then that, well, at the very least I should be able to offer some thoughts.

[tslatt]

I'm not sure if sergpetrenko is asking the same thing that I am wondering, since I can't really understand his question. But, when I googled my question, this page was the only relevant one that came up.

Is there a way to make the tooltips work on content that was loaded onto the page at a later time through ajax? For example, I have content on my page and all of the tooltips work. Then, I load some more content onto the page, using Paul Irish's infinite scroll plugin. At that point the tooltips still work on the content that was on the page originally, but none of them work on the new content that was ajax-loaded. In order to get the tooltips to work on the new content, I have to destroy them and reinitialize them after the load.

Am I missing something?

Thanks for any help you can provide.

[stevenbenner]

@tslatt What you want is a live mode (see: issue #33). That's something that I've been considering for a long time but it's easier said than done and would add a lot of code for a relatively rare use case. Right now you will have to either run powerTip() again on the new elements or build your own event handler and call the PowerTip API methods directly.

A custom event handler isn't as hard as it sounds and there is an example in issue #33.

[vincentwansink]

I had a similar problem. Basically the tooltips were lost anytime I refreshed the data using ajax, so this seemed to be a simple solution: I call this function on the callback of every ajax load to reload the tooltips on the page.

function reloadPowerTips(){
  $('.tooltip_n').each(function(){
    $(this).data("powertip", $(this).attr("title"));
  });
}

It just loops through all the powertips, and resets the current title value into the data collection.

[danpetitt]

Just adding my desire for a built-in solution as requested :+1:

[stevenbenner]

This is still on my radar. Just haven't had time to do any serious new feature work reviews.

Also, I think there are two conversations going on here. Let me make sure everyone is on the same page for the requested functionality:

Loading tooltip content from some remote source via AJAX

What this issue was originally about (at least as I understood it). Basically the idea is that the source for the tooltip content can be some URL. For example:

$('#myElement').powerTip({
    content: 'http://example.com/api/getsummary?item=123'
});

This is a very complex feature where PowerTip would need to know how to pull some arbitrary content from a URL and handle rendering it. This is still just on the "maybe" list because it is a very specific use case that will not apply to most people wanting a tooltip plugin.

Live mode (aka event delegation)

Issue #33. This is probably what most people are requesting, because it would be invaluable for people making SPAs or very dynamic pages. Even I have wanted this feature a couple times.

The request is to make PowerTip run on the page as a whole (document), and listen for relevant events from elements anywhere in the page. The idea being that you don't have to track state re-run the powerTip function on any new elements. For example:

$(document).powerTip({
    selector: 'a.has-tooltip'
});

This way the a.has-tooltip elements don't have to exist when PowerTip is run. They can be added to the page anytime after the powerTip call, and PowerTip should still detect them and show tooltips.

While this is a complex feature, it is much easier to implement (reliably) than the former. As well as much more widely useful. This one is high on my priority list.

[vincentwansink]

That would be awesome.

[digitalhitler]

digitalhitler commented on 20 Nov 2012 Oh god.