在wordpress中懸停彈出窗口

我想要在WordPress中產品圖片懸停的彈出窗口，我使用popover.js還包括引導程序的js和css。我的WordPress主題包含bootstrap。這裏是我的產品形象代碼，在wordpress中懸停彈出窗口

<a href="Projektorer-research.jpg" data-toggle="popover" data-trigger="hover" data-content="test"><img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" /></a>

這裏我使用的數據內容=「測試」爲例，其實我想那邊顯示無序列表。

來源

2015-10-13 chintan suthar

您初始化您的Popovers？ 您必須使用JS來自行初始化它們，如示例代碼段中所示。

請參閱docs工作示例。

$(function() { 
 
    $('[data-toggle="popover"]').popover(); 
 
});

body, 
 
html { 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a href="#" data-toggle="popover" data-trigger="hover" data-content="test"> 
 
    <img class="alignnone size-full wp-image-134" src="http://placehold.it/350x150" alt="..." width="268" height="150" /> 
 
</a>

來源

2015-10-13 06:12:44 vanburen

我覺得你是想在你的酥料餅顯示自定義（HTML）的內容，如果你不喜歡下面你可以設置你的酥料餅的任何內容。

 <div id="popover_content" class="row company-logo" style="display: none"> 
      <ul> 
       <li><a href=""><img src="images/alico-logo.png" alt=""/></a></li> 
       <li><a href=""><img src="images/national.png" alt=""/></a></li> 
       <li><a href=""><img src="images/traveller.png" alt=""/></a></li> 
       <li><a href=""><img src="images/progressive.png" alt=""/></a></li> 
       <li><a href=""><img src="images/formost.png" alt=""/></a></li> 
       <li><a href=""><img src="images/the.png" alt=""/></a></li> 
       <li><a href=""><img src="images/circle.png" alt=""/></a></li> 
      </ul> 
     </div> 
<a id="popx" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="">Click to toggle popover</a>

和初始化你的酥料餅是這樣的：

<script> 
     $(function() { 
      $('#popx').popover({ 
       html: true, 
       content: function() { 
        return $('#popover_content').html(); 
       } 
      }); 
      ; 
     }) 
    </script>

來源

2015-10-13 06:27:17 alright

在wordpress中懸停彈出窗口

回答

相關問題