twitter-bootstrap 图像上的 Bootstrap 弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14760006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Popover on Image
提问by Brandon Charles
So I have a list of icons, I'm trying to get a popover to activate when you hover over an icon, I can't seem to get it to work, any help would be appreciated.
所以我有一个图标列表，当你将鼠标悬停在一个图标上时，我试图让一个弹出框激活，我似乎无法让它工作，任何帮助将不胜感激。
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
And i have this in a separate js file
我在一个单独的 js 文件中有这个
$('.icon').popover({placement:'top'});
回答by dalcam
this is over a year late, but i found this to work:
Fiddler Link
using this JS:
这已经晚了一年多，但我发现它可以工作：
Fiddler Link
using this JS：
$(function(){
$('[data-toggle=popover]').popover({
trigger: 'focus',
html: true,
title: 'Toolbox'
})
});
And this html:
而这个 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"/>
You need to allow the image to accept focus with the tabindex property. That was the key for me. Remove the "trigger: 'focus' line if you want the popover to stay open on click events...
Hope it helps!
您需要使用 tabindex 属性允许图像接受焦点。那是我的关键。如果您希望弹出窗口在点击事件时保持打开状态，请删除“trigger: 'focus' 行...
希望它有所
帮助！
回答by Shashikala
Put attributes in jquery variable instead of tag
将属性放在 jquery 变量而不是标签中
<img class="icon" rel="popover" src="images/brandable.png"/>
Add script as following
添加脚本如下
<script>
$('document').ready(function() {
var popOverSettings = {
placement: 'top',
selector: '.icon',
title:'Brandable',
trigger: "hover",
content:'This is a popover'
};
$(this).popover(popOverSettings);
});
</script>
回答by cchiera
For your code you have:
对于您的代码，您有：
<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"isn't valid html. Bootstrap help document notes, "Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation=""."
trigger: "hover"不是有效的 html。Bootstrap 帮助文档注释，“选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如data-animation="".”。
So instead you would want to include data-trigger="hover" also looks like your missing a space before src=.
因此，相反，您希望包含 data-trigger="hover" 也看起来像您在src=.
Also you have placement top in the html and also in the javascript. You only need to declare in one place. So you can delete data-placement="top" from the img tag, or in your javascript you can remove it so it would just be $('.icon').popover({placement:'top'});
此外，您在 html 和 javascript 中也有放置顶部。您只需在一处申报。所以你可以从 img 标签中删除 data-placement="top"，或者在你的 javascript 中你可以删除它，这样它就可以了$('.icon').popover({placement:'top'});
Also you have "$" in front of your function. Depending on where that code is located you may have a jquery conflict. To note for sure you'll need to post whichever error you are seeing in your error log. If you use chrome right click > web inspect > click the red x at the bottom and copy any errors you see in there.
$你的函数前面还有“ ”。根据该代码所在的位置，您可能会遇到 jquery 冲突。请务必注意，您需要发布您在错误日志中看到的任何错误。如果您使用 chrome 右键单击 > Web 检查 > 单击底部的红色 x 并复制您在那里看到的任何错误。
回答by deau
Perhaps the easiest way to do this uses the OnMouseOverand OnMouseOutevents described in this answer: https://stackoverflow.com/a/10709196/121737
也许最简单的方法是使用此答案中描述的OnMouseOver和OnMouseOut事件：https: //stackoverflow.com/a/10709196/121737
I would prefer to do this using one image, the same width as a normal icon but twice the height. This image would show two icons, one above the other, the upper one being the normal icon, the lower being the rolled over icon:
我更愿意使用一张图像来做到这一点，与普通图标的宽度相同，但高度是其两倍。此图像将显示两个图标，一个在另一个上方，上面的一个是普通图标，下面的一个是滚动图标：
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');
}
After this declaring the icons in HTML is much cleaner:
在此声明 HTML 中的图标之后，就更简洁了：
<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />
