Add setContent method to API

[gvn]

It would be nice to be able to dynamically modify the content of the tooltip with a setContent method that could take either a HTML string or jQuery element as an argument.

IE:

$hello = $('<p>Hello World</p>');

$.powerTip.setContent('<p>Hello World</p>');

// OR

$.powerTip.setContent($hello);

[stevenbenner]

Are you wanting to replace the content of a tooltip that is currently open, or are you looking for a more intuitive way to set the content than the current data attributes?

If you just want to replace the content of an opened tooltip then in 99% of cases you can substitute $.powerTip.setContent() with $('#powerTip').html() and have the exact same thing (at least for your example). I can however see the benefit of setting content without forcing developers to memorize the names of my arbitrary data attributes.

[gvn]

Well, what I've noticed is that you are resetting the tooltip's inner HTML every time before you display it, so I wasn't able to dynamically change the content without the change being visible to the user. If I changed its inner HTML while it was hidden the HTML would just be replaced with the original content pulled from the data attribute.

The use case is when you want to dynamically change the content of an element's tooltip while it's hidden.

An additional problem with this is that you can't bind JS to the HTML inside the tooltip because the HTML gets regenerated fresh every time. I'd suggest only setting it initially and on subsequent setContent calls if possible...

[stevenbenner]

Yeah, PowerTip has only one tooltip div per instance, and that tooltip div will be shared across all instance where the popupId option is identical. That's why the content in the tooltip div is replaced for every tooltip display.

I wasn't able to dynamically change the content without the change being visible to the user

You can change the data attributes values at any time before the tooltip opens and that will be shown when the tooltip renders.

Example:

$('.button').data('powertip', 'First string');
$('.button').data('powertip', 'Second string');

$('.button').powertip('show'); // tooltip content will be 'Second string'

Overwriting the data attributes in this manner will change the content that will be shown the next time the tooltip opens, but not affect an open tooltip.

An additional problem with this is that you can't bind JS to the HTML inside the tooltip

Not directly, no, because the content of the tooltip div is transient like you said. But if you use the powertipjq data attribute then you can bind all of the events you want because the content is clone()ed into the tooltip.

Example:

var tipContent = $('<a href="#">I am a link with a click event</a>');
tipContent.on('click', function() { /** do stuff on click **/ });

$('.button').data('powertipjq', tipContent);

$('.button').powertip('show'); // tooltip content will still have click event

Since the jQuery object is copied into place with clone() you can modify the original tipContent object at any time without affecting the tooltip if it is open. Changes you make to tipContent will show the next time the tooltip opens.

[gvn]

Interesting, thanks for providing some workarounds! I still think that a set method would be far clearer to use and for other developers to understand. Also, it feels cleaner to not have to rely on DOM manipulation to achieve these results.