1

所以我有一个图标列表，当您将鼠标悬停在图标上时，我试图激活一个弹出框，我似乎无法让它工作，任何帮助将不胜感激。

<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'});
4

4 回答 4

4

将属性放在 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>
于 2016-01-28T08:35:39.980 回答
3

这已经晚了一年多，但我发现这个工作： Fiddler Link
using this 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 属性允许图像接受焦点。这对我来说是关键。如果您希望弹出框在点击事件上保持打开状态，请删除“触发器：'焦点'行......
希望它有帮助！

于 2014-07-23T13:26:25.210 回答
0

对于您的代码，您有：

<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-，如data-animation="".”

因此，您可能想要包含 data-trigger="hover" ，看起来您之前缺少一个空格src=。

此外，您在 html 和 javascript 中都有放置顶部。您只需在一处申报。因此，您可以从 img 标记中删除 data-placement="top" ，或者在您的 javascript 中删除它，这样就可以了$('.icon').popover({placement:'top'});

$你的函数前面还有“ ”。根据该代码所在的位置，您可能会遇到 jquery 冲突。需要注意的是，您需要在错误日志中发布您看到的任何错误。如果您使用 chrome 右键单击​​ > web 检查 > 单击底部的红色 x 并复制您在其中看到的任何错误。

于 2013-11-07T03:35:08.217 回答
-1

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

我更喜欢使用一个图像来执行此操作，该图像的宽度与普通图标相同，但高度是其两倍。此图像将显示两个图标，一个在另一个之上，上一个是普通图标，下一个是翻转图标：

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')" />
于 2013-02-07T20:36:17.277 回答