Feature Request: Add powerTipPreOpen

[speedplane]

Currently there is an event before the data is rendered and after it is displayed to the user. It would be nice if there was an event that was triggered after render but before user display. We often want to fiddle with the placement of certain items before showing them to the user.

[speedplane]

It's an easy fix too, just add two lines in showTip:

        // set tooltip position
        if (!options.followMouse) {
            positionTipOnElement(element);
            session.isFixedTipOpen = true;
        } else {
            positionTipOnCursor();
        }

        // trigger powerTipPreOpen event
        element.trigger('powerTipPreOpen');

        // fadein
        tipElement.fadeIn(options.fadeInTime, function fadeInCallback() {
            // start desync polling
            if (!session.desyncTimeout) {
                session.desyncTimeout = setInterval(closeDesyncedTip, 500);
            }

            // trigger powerTipOpen event
            element.trigger('powerTipOpen');
        });

[speedplane]

Actually, I need a slight change to the above, because the elements need to be visible to have their attributes set:

        // trigger powerTipPreOpen event
        tipElement.show();
        element.trigger('powerTipPreOpen');
        tipElement.hide();

[stevenbenner]

tipElement.show();

You had me up until here. What exactly are you trying to do that requires the tooltip content to be visible?

Without knowing the specifics of your situation, generally, if you run into such a situation it would be best to create/modify your elements outside of the document via DOM document fragments or jQuery detached elements. Then you can clone or move the fully prepared elements to the tooltip element via the powertipjq data attribute or just filling the #powertip div manually during the powerTipPreRender event.

[speedplane]

If you don't call show beforehand, then the width and the height of the powertip DOM element won't be set properly in the powerTipPreOpen command. This isn't a problem for simple powertips, but in my case, there are many DOM elements in the powertip that have to be neatly stacked and it requires accurate sizing.

To see an example, go here and hover over Oracle in the party names.

[stevenbenner]

Wow, that is probably the largest tooltip that I have ever seen (imho too large). What are you trying to do here that requires or would be made easier by having a pre-open event?

[speedplane]

All of the white little boxes are the attorneys in the case. If I add the boxes naively they look really bad because there are oddly spaced gaps between the attorney names. To fix that, I use the masonry library which stacks them nicely. I want masonry to run before I start fading in the tooltip. However, in order for masonry to run properly, the elements need to be fully rendered. Accordingly, I show the DOM element very quickly, run masonry, and then hide it.

[stevenbenner]

I've never used masonry before. But have you tried running it on an unattached jQuery object? You might be able to generate your tooltip content in a new jQuery object, run masonry on it, then attach that object to the powertipjq data attribute on page load.

Example:

// domready
$(function() {
    var attorneyList = $('<div><div class="attorney">Foo Bar, Esq.</div></div>');
    attorneyList.masonry(masonryOptions);
    $('#plaintiff').data('powertipjq', attorneyList);
    $('#plaintiff').powerTip();
});