Question

我正在尝试让bootstrap popover在网站上运行，而且我有点成功。当点击链接时我可以显示popover但是除了标题之外我没有看到框中的任何内容。我尝试了两种方法：

<a class="btn btn-link login-popover" rel="popover" data-placement="bottom" data-title="Sign in to the website builder" data-html="true" data-content="Lo4545445"> Sign in  <span class="caret"></span></a>

和

$('.login-popover').popover({
    placement: 'bottom',
    title: 'Sign in to the website builder',
    content: 'testing 123',
    trigger: 'click'
});

然而，实际上没有人在框中显示内容。您可以转到http://www.onemobi.net/new并点击顶部的Sign in来了解我的意思。

编辑：我没有同时做这两件事。我试了一个然后另一个。

Answer 1

您必须将代码放在函数

中

$(document).ready(function() {
  $('.login-popover').popover({
    placement: 'bottom',
    title: 'Sign in to the website builder',
    content: 'testing 123',
    trigger: 'click'
  });
});

或

$(function () { 
   $(".login-popover").popover();    
});

然后它的工作原理。但是为什么要两次定义弹出设置（在脚本和数据属性中）？

<强>尤里卡！

您似乎已更改bootstrap.css中的默认样式。实际上在<p>中显示了popover的内容，但你有

.btn-group {
  font-size: 0;
  white-space: nowrap;
}

显而易见，通过改变font-size：0;内容将可见（在chrome检查器中测试）添加到您的CSS

.btn-group {
  font-size: 12px; /*or whatever size */
}

Answer 2

当我查看当前版本（v2.2.2）时，此错误已得到解决。请下载最新版本。

Bootstrap popover不显示内容

2 个答案: