Is it possible to use a div as content for Twitter's Popover

Question

I am using twitter\'s bootstrap\'s popover here. Right now, when i scroll over the popover text a popover appears with just text from the \'s da

Answer 1

First of all, if you want to use HTML inside the content you need to set the HTML option to true:

$('.danger').popover({ html : true});

Then you have two options to set the content for a Popover

• Use the data-content attribute. This is the default option.
• Use a custom JS function which returns the HTML content.

Using data-content: You need to escape the HTML content, something like this:

Click

You can either escape the HTML manually or use a function. I don't know about PHP but in Rails we use *html_safe*.

Using a JS function: If you do this, you have several options. The easiest I think is to put your div content hidden wherever you want and then write a function to pass its content to popover. Something like this:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

And then your HTML looks like this:

Click

  
This is your div content

Hope it helps!

PS: I've had some troubles when using popover and not setting the title attribute... so, remember to always set the title.