CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Zohaib
Zohaib

Reputation: 7116

Bootstrap Popover issue

I am using the following code for displaying image as a popover

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\jquery.js"></script>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-tooltip.js"></script>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-popover.js"></script>
    <script type="text/javascript">

    $( document ).ready(function() {
        var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
        $("#blob").popover({ title: 'Look!  A bird image!', content: img });    
    }
    </script>
  </head>
  <body>
    <a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 300px">hover for popover</a>
  </body>
</html>

But the popover never gets displayed. I have used the absolute paths just to make sure that this not path issue, will change that. I have no experience of html or java script coding, any help is highly appreciated.

Upvotes: 0

Views: 698

Answers (1)

Nick
Nick

Reputation: 4092

You're missing the closing ');' for your javascript block. This results in the popover not being registered on the link.

Here's the working fiddle. Also, note that I've added the trigger: 'hover' and html: true attributes so that the popover shows when you hover and your image renders instead of showing text.

  $( document ).ready(function() {
    var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
  $("#blob").popover({ title: 'Look!  A bird image!', content: img, trigger: 'hover', html: true });    
});

Upvotes: 3

Related Questions