Twitter Bootstrap popovers not working in a Wordpress loop

Question

I have been trying to get bootstrap popovers to work within a Wordpress loop with no success, this is what I have so far :

<?php while($have_posts()): $the_post();
  $excerpt = strip_tags(get_the_excerpt());?>

  <a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a>

  <script>
  jQuery('.<?php echo the_ID()?>').mouseenter(function(){
    jQuery(this).popover({
      html: true,
      title: '<?php echo the_title();?>',
      trigger: 'manual',
      placement:'top',
      content:'<?php echo $excerpt;?>'
    }).popover('show');
  });
  </script>
<?php endwhile;?>

This prints what I expect

<a class="5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

etc...

However the popovers aren't displaying on hover and I'm not getting any script errors, so I'm at a loss for why the popovers aren't working, I do have jQuery, bootstrap.js, and bootstrap.css included on page load. Any help would be greatly appreciated!

Thanks

Which part of the script doesn't work? Call them in the console. — AndreKR, Jan 04 '13 at 05:57
Hey Andre, I'm not sure which part isn't working as I'm not getting any console errors. I have called each in the console and got what was expected, the id, title and excerpt of each post. — dcd0181, Jan 04 '13 at 06:05

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Classes and IDs do not work when it starts with numbers!

It is well known stuff that when you give class as a number:

<div class="1234">...</div>

It doesn't work. In your case, it is like this:

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

The class is a pure number. 5598. Doesn't work. So try replacing it with something like:

<a class="p5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.p5598').mouseenter(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

And one more thing I doubt is, the .popover() is a function, that is to be used like instantiation. So, don't give it under .mouseenter(). Replace the whole script this way:

<script>
jQuery(document).ready(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  })
  jQuery('.p5598').hover(function() {
    jQuery('.p5598').popover('show');
  }, function(){
    jQuery('.p5598').popover('hide');
  });
});
</script>

Pump fists in success! Thanks so much this worked, I wasn't aware of that. — dcd0181, Jan 04 '13 at 06:16
Is there a particular reason for using hover like that? Isn't it the same thing as trigger: hover ? — C. E., Jan 04 '13 at 06:17
@dcd018 This link might be useful too [what-characters-are-valid-in-css-class-names](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names). — Praveen Kumar Purushothaman, Jan 04 '13 at 06:19

Twitter Bootstrap popovers not working in a Wordpress loop

1 Answers1

Classes and IDs do not work when it starts with numbers!