Question

我希望popover在WordPress中悬停产品图片，我使用popover.js还包括引导程序的js和css。我的WordPress主题包括bootstrap。这是我的产品图片代码，

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

这里我使用了data-content =＆＃34; test＆＃34;例如，实际上我想在那里显示无序列表。

Answer 1

您是否正在初始化您的弹出窗口？ 您必须使用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>

Answer 2

我认为你试图在你的popover中显示自定义（html）内容，如果你在下面这样做，你可以在你的popover中设置任何内容。

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

并像这样初始化你的popover：

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

在wordpress上悬停的popover

2 个答案: