0

画像をポップオーバーとして表示するために次のコードを使用しています

<!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>

しかし、ポップオーバーは表示されません。これがパスの問題ではないことを確認するために、絶対パスを使用しました。HTML や Java スクリプトのコーディングの経験はありません。

4

1 に答える 1

3

終わりの ');' がありません あなたのJavaScriptブロックのために。これにより、ポップオーバーがリンクに登録されません。

ここに作業フィドルがあります。また、trigger: '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 });    
});
于 2013-11-14T08:56:39.500 に答える