HTML inside Twitter Bootstrap popover

Question

I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

Solution 1

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.

Solution 2

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>

Solution 3

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/

Solution 4

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 });

Solution 5

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

View more solutions

Comments

[Olga]

I answered at the same quesion here: Code for normalization bootstrap popovers: multiply popovers, close button, close outside the popover, and popover with custom HTML.

[Jimmy Ilenloa]

simplest approach by using different quotes for wrapping the html code. Nice thinking.

[xtian]

This modular approach is quite elegant. You can have many popovers and just one generic javascript function.

[Steven Barragán]

Nice, the actual trick is changing the double quotes to single quotes!

[John Washam]

This is great, @Jack, thank you. I love not having to put HTML into attributes. So messy.

[Ivan Bilan]

Is there a way to use it in gwtbootstrap3, it doesn't work in this form. I've asked the question here stackoverflow.com/questions/34142815/…, but no answer so far.

[tread]

Don't know why the above answer is marked as correct. Maybe people deliberately choose the most complicated option to preserve their jobs.

[peter_pilgrim]

Remove HREF href="#" on the ANCHOR tag elements to prevent scrolling to the top of the page!

[Mauno Vähä]

@peter_pilgrim Thanks for saying that. I updated my answer to use latest version of bootstrap and fixed away href="#" from <a> tags and made them behave like buttons instead. (This is also documented at bootstrap site). Added that link to end of my answer.

[peter_pilgrim]

I found an issue with iOS devices. The popover does work with Touch screen. Have you found a general work around? Actually, I think this also happens to Bootstrap popover code as well. Any ideas?

[foxtangocharlie]

I have this popover at the bottom of my page and works great except... It shifts me all the way back to the top of the page. I have it set in a foreach loop of bootstrap thumbnails. Any ideas?

[FastTrack]

Awesome work here, love the simplicity and usability

[plushyObject]

You the real MVP

[user2513846]

It does not seem to be working with bootstrap 3.4.1, can you please help? @Jack stackoverflow.com/questions/60514533/…

[MrD]

Breaking change since Bootstrap 5.0 - Data attributes are namespaced (-bs-) to keep bootstrap functionality apart from own code and third parties. So in this example, you need to change data-html => data-bs-html, data-toggle => data-bs-toggle,data-trigger => data-bs-trigger, data-content => data-bs-content.