Add a « live mode »

[GuillaumeAmat]

If I launch PowerTip with the ".my_class" selector, I should want to have tooltips on existing element with the class "my_class" AND on element added with Ajax later.

[stevenbenner]

This could be a useful addition. But I'm not sure of what the API should look like. $(selector).powerTip() doesn't really make sense in live mode, so it probably belongs in the $.powerTip namespace.

I'll investigate. Do you use any other jQuery plugins with a live mode that you like? I'd like to see how other people are implementing this.

[GuillaumeAmat]

I used to work with https://github.com/vicb/tipsy-swift, but your library is, IMHO, far better and polish.
This live mode is the only thing I regret from TipSwift...

Thanks for your investigation and your good work !

[stevenbenner]

Okay, I see. That project accepts a live option, then uses that to choose between using jQuery's bind() or live() methods when hooking its events up.

I don't think that is the most expressive or efficient way to do it, and the jQuery team would seem to agree since live() was deprecated in 1.7. If I were to build this right now I would try to replicate how the new on() method behaves for event delegation.

Example of what I'm thinking:

$.powerTip(document, '.tips', options);

Or, possibly:

$(document).powerTip(options, '.tips');

If you (or anyone reading this) have any suggestions for the best way to do this please let me know.

[GuillaumeAmat]

I was thinking of the on() event delegation too, but not in that way.

In my opinion, the user perspective must not reflect the technicals tricks. The PowerTip method must be the same and the live mode is sort of an option to switch on and off.

But under the hood, it means that you can grab the selector which was used during the call (I don't know if it's possible). Next, you test the boolean for the live mode and trigger the on() method on the document element if it's true (like your examples).

Am I wrong anywhere ? It's just a suggestion anyway and again, I don't know if jQuery lets you get the used selectors.

[puzrin]

IMHO, this option is too specific to generalise. It will need tons of data-* attributes -> can bloat API. It's not a big problem to make custom initializer, if you have such advanced requirements.

[GuillaumeAmat]

I don't think it's too specific, it can be used on every site which have tooltips. Since one powertip call with one event listener is better than dozens calls and event listeners.

Why it will need more data-* than the actual state ?

[puzrin]

AFAIK, in actual state popover don't have stable data-* API. And if you like to use single event listener, you'll need ability to override any defaults for each specific popover.

Anyway, you can see working example, that does ~ what you are speaking about https://github.com/nodeca/nodeca.users/blob/master/client/common/init/usercard_popover.js#L38 . Feel free to use any part of code as you wish.

[GuillaumeAmat]

Thanks for sharing ;)

[stevenbenner]

There would be some tricky parts to implement this request, such as how to deal with the title attribute. Title attributes need to have their content copied to the data attribute and then removed because we don't want the browser to show the built in title tooltip over the PowerTip tooltip.

Right now that work is done when powerTip() is run, but if we're listening for events bubbling through the document on elements that may or may not exist when the plugin is run then that will be a challenge.

But I won't really know what problems will crop up until I dig deeper. Investigating this is still on my to-do list, but (like all requests) it may get rejected as impossible or to hacky to implement.

I'll let you know when I have more info.

[nrabinowitz]

One way to approach this is by implementing the "manual" option discussed on #26, which basically just suppresses the event attachment. I'm currently using this in my fork for delegated events, lazy-loading the powerTip, like this:

var mouseenterHandler = comp.mouseover = function() {
        var $this = $(this);
        // attach if necessary
        if (!$this.data('powertip')) {
            $this.data('powertip', "My Content");
            $this.powerTip({
                manual: true,
                // other options
            });
        }
        $this.data('displayController').show();
    },
    mouseleaveHandler = function() {
        var controller = $(this).data('displayController');
        if (controller) controller.hide();
    };

$('.parent-element')
    .on('mouseenter', '.child-element', mouseenterHandler)
    .on('mouseleave', '.child-element', mouseleaveHandler);

I will try to submit a pull request for the "manual" option shortly - in its simplest implementation, it's just an if statement around the event listeners.

[GuillaumeAmat]

Awesome! Thank you very much ;)

[seabasss]

Hey great plugin!

I'm having problem with dynamically loaded content though. How can I use this live? Is there a solution? Thanks!

[seabasss]

I tried nrabinowitz's solution but it only works the first time I hover an object, then it stops.