Question

我使用以下代码将图像显示为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>

但是popover永远不会显示出来。我使用绝对路径只是为了确保这不是路径问题，将改变它。我没有html或java脚本编码的经验，非常感谢任何帮助。

Answer 1

你错过了收盘'）;'为您的JavaScript块。这导致弹出窗口未在链接上注册。

这是working fiddle。此外，请注意我添加了触发器：'hover'和html：true属性，以便在您悬停时显示弹出框，并且您的图像呈现而不是显示文本。

  $( 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 });    
});

Bootstrap Popover问题

1 个答案: