Bootstrap Popover不显示
[英]Bootstrap Popover not displaying
问题描述
Currently I have a popover set up that is not initialing. 
目前，我有一个未初始化的弹出窗口设置。 My code is as follows: 我的代码如下：
HTML: HTML：
<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
JavaScript: JavaScript：
$(function () {
$('[data-toggle="popover"]').popover()
})
I've included everything I need to CSS and library wise and managed to replicate the issue here in a fiddle: https://jsfiddle.net/W3R3W0LF666/33rmse7m/ 我已经囊括了CSS和库所需的一切，并设法在小提琴中复制了此问题： https : //jsfiddle.net/W3R3W0LF666/33rmse7m/
So far I've tried moved the initialization text to various places in the JS file to rule out any hierarchy issues 到目前为止，我已经尝试将初始化文本移到JS文件中的各个位置，以排除任何层次结构问题
5 个解决方案
解决方案1
2 已采纳 2015-09-08 10:25:50
Initialize 初始化
$('[data-toggle="popover"]').popover()
Pop it 弹出它
$('[data-toggle="popover"]').popover('show');
解决方案2
0 2015-09-08 10:27:48
I have updated your code, Check code below JSFiddle : 我已经更新了您的代码，请在JSFiddle下面检查代码：
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'bottom'
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>
解决方案3
0 2015-09-08 10:29:31
Check this one this will help you.. 选中此一项将对您有所帮助。
HTML 的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
解决方案4
0 2015-09-08 10:29:51
You forgot to load the external resources. 您忘记加载外部资源。
From the docs: 从文档：
How popover is triggered - click |
You need to define the trigger data-trigger="hover" : 您需要定义触发器data-trigger="hover" ：
<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
Have a look at this fiddle . 看看这个小提琴 。
PS: Yours actually works, but it only triggers on-click. 附言：您的方法确实有效，但只会触发点击。
解决方案5
0 2015-09-08 10:41:33
Just wrapped your jQuery script like this: 像这样包装您的jQuery脚本：
jQuery(function ($) {
$('[data-toggle="popover"]').popover();
});
Or if you want to load the script on document ready , then use this: 或者，如果您想将脚本加载到document ready ，请使用以下命令：
jQuery(document).ready(function($){
$('[data-toggle="popover"]').popover();
});
Reason: $ causes name-conflict between jQuery and plain-js/other-libraries hence why you have to call it differently so the browser knows that jQuery and not some other library is using it. 原因： $导致jQuery和plain-js/other-libraries之间的名称冲突，因此为什么必须以不同的方式调用它，以便浏览器知道jQuery，而不是其他库在使用它。
Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/33rmse7m/7/ 这是上面代码的jsfiddle： https ://jsfiddle.net/AndrewL32/33rmse7m/7/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.