Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

inline content fails to move into tooltip after ajax refresh of content

I'm successfully using tipped to show preview of downloadable docs (using google doc viewer iframe). However, the list of files has an ajax based pagination, search and clear results features and once these are used, the tooltip no longer can move the inline content into itself. The tooltip just displays the title in this situation.

Would I need to reinitiate tipped so it scans the modified dom?

Comments

  • How you are using Tipped? You mention inline tooltips, iframes and an ajax refresh, so that's confusing me.

    If you are showing an iframe in the tooltip by pulling it inline, any ajax updates inside that iframe shouldn't affect how the tooltip works, since that ajax code doesn't run in the parent window. All the tooltip would be doing is showing and hiding the iframe.
  • thanks for the reply.

    I am just using the tipped inline data attribute which is pulling in an iframe (google doc viewer). The page is a list of downloadable files so the tooltip appears when hovering over a link to these files. It works nice.

    The problem happens when ajax is used on the page (not within tooltip iframe) where the list of files gets refreshed via a search or pagination clicked etc. Once this happens, the tooltip fails to grab the content of the inline id and instead only show the title.

    The inline content is still loaded on the page after the ajax updates, but I guess tipped no longer can find it. I am assuming that tipped needs to be re-initiated to refresh its own state but not sure. Maybe I should just take a different approach to how I use tipped such as delegation and ajax calls.

    Thanks,
    sull
  • If ajax replaces the element that has a tooltip attached to it the new element in the DOM won't have a tooltip attached to it. It would show the title because Tipped hasn't instantiated a new tooltip.

    Before you update the page with ajax it's best to clean up using Tipped.remove, any tooltips will then push their inline content back to the page.

    After the ajax update you should recreate tooltips using Tipped.create().

    When using Tipped.delegate() you won't have to recreate tooltips, Tipped will automatically detect when a new element needs a tooltip.

    In both cases you should remove tooltips before updating the DOM since otherwise you might get tooltip instances on the page that no longer have an element to trigger them. Those leftover tooltips could have inline elements already pulled inside of them, which won't be replaced when you update the DOM. That makes it possible to have multiple elements with the same ID after your ajax update. So always use Tipped.remove to clean up before updating the DOM.
  • That makes sense, thanks. I'll hook it up that way.
  • I decided to leverage jquery-watch plugin (https://github.com/RickStrahl/jquery-watch) to monitor for some changes target div where the content gets updated via ajax and fire off the remove and create functions accordingly. Works good!

    Thanks again.
  • Cool. I think a MutationObserver would be a more correct way to automate it. I've considered implementing it in Tipped but it's not supported in IE10 and below without a shim. If you can afford dropping those browsers or including a shim it would be a good alternative.

    https://developer.mozilla.org/nl/docs/Web/API/MutationObserver
Sign In or Register to comment.