Bootstrap popover not showing content

Question

I am trying to get the bootstrap popover to work on a website and I have been somewhat successful. I can get the popover to show up when the link is clicked however I don't see any content in the box except for the title. I have tried it 2 ways:

<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>

and

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

However neither one actually shows the content in the box. You can see what I mean by going to http://www.onemobi.net/new and clicking Sign in at the top.

Edit: I'm not doing both of these at the same time. I tried one and then the other.

Answer 1

You must place the code in a function

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

or

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

then it works. But why are you defining the popover settings twice (both in script and as data attributes)?

Eureka!

It seems that you have changed the default styling in bootstrap.css. The content of the popover IS actually shown, in a <p>, but you have

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

obvious, by changing font-size: 0; the content will be visible (tested in chrome inspector) Add to your CSS

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