Opentip does not save DOM modification between openings

[pioterj]

When DOM inside a tooltip is modified the change is not saved and disappears when the tooltip is opened again. This is a big drawback when creating an interactive tooltip. Is there any way to work around?

Anyway, thanks for creating and sharing this really nice library!

[enyo]

Hi. You should use setContent() to update tooltip content.

[pioterj]

Let me clarify my example. I'm using the JQuery version to create an interactive tooltips with the following code:

$(".tooltip").each(function(){
    var $tooltip = $(this);
    $tooltip.opentip("", {
        ajax: $tooltip.data("tooltip-url"),
        fixed: true,
        target: true,
        hideOn: "mouseout",
        hideTriggers: ["target", "tip"]
    });
});

A user can mouse over this tooltip to make a change, for example add a rating. This triggers a DOM modification inside the tooltip. However this modification is not persisted and disappears when user opens the tooltip again.

I'm not exactly clear on how to use setContent() to overcome this. But for sure it would be very convenient if DOM modifications could be saved by Opentip by default. Especially since such interactive tooltips are quite common.

Could you re-open this issue?

[enyo]

@pioterj I want to keep the ability to destroy opentip HTML elements and restore them when necessary. This isn't possible if users just edit the underlying HTML of opentips because it would require Opentip to observer HTML changes, and store them. What DOM modifications are you talking about? Because if it's just about changing a tooltips HTML content, you can always do this instead of manipulating the dom:

var myOpentip = $tooltip.opentip(/*etc...*/);
function onSomethingChanged() {
  myOpentip.setContent("New <strong>HTML</strong> content.");
}

Feel free to continue discussion if you think I'm not getting the point. I'll reopen the issue as soon as you convinced me that Opentip needs a change ;)

[pioterj]

OK, let's continue the discussion :-)

Let's say you want to do something like flixster.com. On their main page there is a gallery with films. When you mouse over one the tooltip is downloaded via AJAX and displayed. It provide some additional information but also an ability to rate the film. When you mouse over the rating it modifies some element's class so that the change is visible. When you click on the rating the class modification is saved. When you open the tooltip again you still see the rating you just selected.

The tooltip part could be done by the code I provided above. The rating part could be something like that:

$body.on("click", ratingStarSelector, function (e) {
    // handle click...
});
$body.on("mouseenter", ratingStarSelector, function () {
    // handle mouse enter...
});
$body.on("mouseleave", ratingStarSelector, function () {
    // handle mouse leave...
});

The above JQuery code works for any rating displayed on the page no matter whether it was present on the page when it was loaded or added dynamically later on. Tooltip code and rating code are nicely decoupled.

When the HTML inside the tooltip is modified by another script I'd expect this modification to stay when I open the tooltip again. This is what happens when you use qTip for example.

To your point about being able to restore the HTML content I don't understand why this is important. If you modify the HTML inside the tooltip using a script then this is what you want, right? Why restore the original value by default?

[enyo]

The reason I wanted to be able to remove HTML content is so Opentip could remove the HTML from hidden elements so adding lots of opentips won't clutter the HTML. But the use case you presented seems very sensible and I agree that such functionality is more important than the minor performance boost of freeing some HTML elements.

[enyo]

The actual fix for this bug is 38d4cfcc755e16edc2f325e2b17ecff9d6e16dd1

[sakattack]

in your ajax set the option cache: false so that the new rating will always be loaded