Bootstrap popover不显示内容

Question

我试图让bootstrap 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中的默认样式.实际上显示了popover的内容<p>,但是你有

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

显而易见,通过改变font-size:0; 内容将可见(在chrome检查器中测试)添加到您的CSS

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