0

I've a WordPress blog where I'm using the Infinite Scroll plugin to load posts infinitely. I developed the theme for the blog using Twitter Bootstrap 2.3.2 and I'm using the Bootstrap Tooltip plugin to show post meta (date, etc.) in a Twitter Bootstrap tooltip that fires on hover. My problem is that with the default set of posts that load when the site first loads, the tooltips work just fine using the following code:

$(document).ready(function() {
    $('.post-info a').tooltip();
})

But when the ".content" DIV is dynamically updated with the new sets of posts pulled by an AJAX request, the same code stops working on newly inserted posts and the code provided above no longer shows the Bootstrap tooltip on mouse hover. Here is the HTML markup of the link that's supposed to show up the tooltip on hover:

<a href="#" data-toggle="tooltip" data-placement="top" title="Dynamically inserted text with the help of PHP">Dynamically inserted text with the help of PHP</a>

Could you please help me solve this issue?

Thanks a lot!

Avinash Kumar
  • 53
  • 7
  • Thanks for flagging this as duplicate. The other answer linked here doesn't solve my problem. If I take the approach suggested on that page, the tooltip completely stops working everywhere, even on the existing elements present in DOM. – Avinash Kumar Nov 03 '14 at 22:51
  • There was a conflict between Bootstrap and jQuery UI, that's why the suggestions on the linked page (Event binding on dynamically created elements) didn't work yesterday. Sorry, guys! – Avinash Kumar Nov 04 '14 at 12:36
  • If anyone else is facing a conflict issue between Bootstrap and jQuery UI, here is the solution: http://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap – Avinash Kumar Nov 04 '14 at 12:41

1 Answers1

0

You want to add 'selector' option

$('.post-info a').tooltip({
    selector: '.post-info a';
});

Example from documentaion: http://jsbin.com/zopod/1/edit

Victor Scherba
  • 1
  • 1
  • Thanks for the answer! I tried that but then the tooltip completely doesn't work. It only works when I'm doing this: `$("selector").tooltip();` – Avinash Kumar Nov 03 '14 at 22:53
  • 1
    This is almost correct - you need a selector (which is always present on the page). For instance, if you have a parent div #posts, you could do `$('#posts').tooltip({ selector: '.post-info a' });` – Sam Dufel Nov 04 '14 at 00:53
  • Thanks, Sam! This and the suggestion in the jsbin example that Funk Man linked somehow works today but it's buggy. When I'm using the `$("selector").tooltip();` technique, the tooltip style shows up just fine but when I'm using the technique you suggested, the tooltip div (with styles) isn't being created. It only shows the tooltip data without any styles, on the very left of the window. Also, on hover, `aria-describedby="ui-tooltip-n"` (n = number) is being added to the selector while in the `$("selector").tooltip();`, when I hover over the link, a new div is created with "tooltip" class. – Avinash Kumar Nov 04 '14 at 07:56
  • Figured out the problem with styling. jQuery UI library is causing the styles to break due to a conflict. I've tried to find a solution for the conflict but haven't succeeded in doing that. @FunkMan Since your original answer doesn't work (the documentation code in the jsbin example does), if you could edit your answer then I'd accept it. Thanks to you and Sam for helping me out! – Avinash Kumar Nov 04 '14 at 12:32