HTML inside Twitter Bootstrap popover

You cannot use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.

Here is working JSFiddle which shows you how to create bootstrap popover.

Relevant parts of the code is below:

HTML:

<!--  Note: Popover content is read from "data-content" and "title" tags. --> <a tabindex="0"    class="btn btn-lg btn-primary"     role="button"     data-html="true"     data-toggle="popover"     data-trigger="focus"     title="<b>Example popover</b> - title"     data-content="<div><b>Example popover</b> - content</div>">Example popover</a> 

JavaScript:

$(function(){     // Enables popover     $("[data-toggle=popover]").popover(); }); 

And by the way, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.

Here is the link to the complete spec: Bootstrap Popover

Bonus:

If for some reason you don't like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.

you can use attribute data-html="true":

<a href="#" id="example"  rel="popover"      data-content="<div>This <b>is</b> your div content</div>"      data-html="true" data-original-title="A Title">popover</a> 

Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this:

HTML:

<!-- Popover #1 --> <a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>  <!-- Content for Popover #1 --> <div class="hidden" id="a1">   <div class="popover-heading">     This is the heading for #1   </div>    <div class="popover-body">     This is the body for #1   </div> </div> 

JS:

$(function(){     $("[data-toggle=popover]").popover({         html : true,         content: function() {           var content = $(this).attr("data-popover-content");           return $(content).children(".popover-body").html();         },         title: function() {           var title = $(this).attr("data-popover-content");           return $(title).children(".popover-heading").html();         }     }); }); 

This can be useful when you have a lot of html to place into your popovers.

Here is an example fiddle: http://jsfiddle.net/z824fn6b/

You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):

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

I used a pop over inside a list, Im giving an example via HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>