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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.