在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中悬停弹出窗口

回答

相关问题