Question

所以我有一个图标列表，当你将鼠标悬停在一个图标上时，我正试图激活一个popover，我似乎无法让它工作，任何帮助都会受到赞赏。

<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

我有一个单独的js文件

$('.icon').popover({placement:'top'});

Answer 1

这已经晚了一年多了，但我发现这个有效： Fiddler Link
使用这个JS：

$(function(){
    $('[data-toggle=popover]').popover({
      trigger: 'focus',
      html: true,
      title: 'Toolbox'
}) 
});

这个html：

        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
        data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>

您需要允许图像使用tabindex属性接受焦点。这对我来说很关键。如果您希望弹出窗口在点击事件中保持打开状态，请删除“触发器：'焦点'线...
希望它有所帮助！

Answer 2

将属性放在jquery变量中而不是标记

<img class="icon" rel="popover" src="images/brandable.png"/>

按以下方式添加脚本

<script>
$('document').ready(function() {
    var popOverSettings = {
        placement: 'top',
        selector: '.icon',
        title:'Brandable',
        trigger: "hover",
        content:'This is a popover'
    };
$(this).popover(popOverSettings);
});
</script>

Answer 3

对于您的代码：

<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

trigger: "hover"无效的HTML。 Bootstrap帮助文档说明，“选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到数据 - ，如data-animation=""。”

所以你想要包含data-trigger =“hover”，看起来就像你在src=之前遗漏了一个空格。

此外，您还可以在html和javascript中放置顶部。您只需要在一个地方申报。因此，您可以从img标记中删除data-placement =“top”，或者在您的javascript中删除它，以便它只是$('.icon').popover({placement:'top'});

此外，您的功能前面还有“$”。根据代码的位置，您可能会发生jquery冲突。要注意，您需要在错误日志中发布您看到的任何错误。如果您使用chrome右键单击＆gt;网络检查＆gt;单击底部的红色x并复制您在那里看到的任何错误。

Answer 4

也许最简单的方法是使用此答案中描述的OnMouseOver和OnMouseOut事件：https://stackoverflow.com/a/10709196/121737

我更喜欢使用一个图像，宽度与普通图标相同但高度的两倍。此图像将显示两个图标，一个在另一个上方，上面一个是正常图标，下面是滚动图标：

img.icon {
    display: block;
    width: 4ex; height: 4ex;
    background-size: 4ex 8ex;
    background-position: 0 0;
}

img.icon:hover {
    background-position: 0 -4ex;
}

img.icon#twitter {
    background-image:url('icons/twitter.jpg');
}

img.icon#facebook {
    background-image:url('icons/facebook.jpg');
}

在此声明后，HTML中的图标更清晰：

<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />

图像上的Bootstrap Popover

4 个答案: