How do I make Bootstrap popover work with HTML content in a seperate element

Related searches

I am in the process of combining Bootstrap panels with Bootstrap popover functionality. The goal is to show a popover when the user hovers the panel's header. I've already got this to work, except that the data-content="" part becomes quite unmanageable when it has a lot of HTML inside.

Below is some sample HTML I am working with. The part that says "LOADS OF HTML" contains div's, table's, p's, etc.

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-briefcase fa-fw"></i> 
        <abbr title="Panel title" data-container="body" data-toggle="popover" 
              data-placement="bottom" data-trigger="hover" data-html="true" 
              data-content="<div>LOADS OF HTML HERE</div>">
          Panel title
        </abbr>
        <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
            <!-- some buttons go here -->
        </div>
    </div>
    <!-- /.panel-heading -->
    </div>
    <!-- some panel content goes here -->
</div>

Other Bootstrap plugins solve this issue by allowing you to put the HTML in a separate element and then reference that element with a "data-target" attribute. Unfortunately, Popover does not support this. How do I mimic this behavior without writing element specific JavaScript?

Any text/HTML you want to display in the popover can be added in a DIV which has a display:none; CSS property to it. You can pass a function to the content property of the popover options which gets the content from the hidden DIV. This way one doesn't need to reference by ID and insert script tags.

Here is an example http://jsfiddle.net/wb3n8/

HTML:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 1</h3>

        </div>
        <div class="panel-body">Panel content 1</div>
        <div class="my-popover-content">Here is some hidden content 1</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 2</h3>

        </div>
        <div class="panel-body">Panel content 2</div>
        <div class="my-popover-content">Here is some hidden content 2</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 3</h3>

        </div>
        <div class="panel-body">Panel content 3</div>
        <div class="my-popover-content">Here is some hidden content 3</div>
    </div>
</div>

CSS:

.my-popover-content {
    display:none;
}

Javascript:

$(document).ready(function () {
    popoverOptions = {
        content: function () {
            // Get the content from the hidden sibling.
            return $(this).siblings('.my-popover-content').html();
        },
        trigger: 'hover',
        animation: false,
        placement: 'bottom',
        html: true
    };
    $('.panel-heading').popover(popoverOptions);
});

Popovers � Bootstrap, Triggering popovers on hidden elements will not work. Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element. As a workaround, you'll want to trigger the popover from a wrapper < div> or <span> and override the Base HTML to use when creating the popover. Anytime you obtain several designs on a parent element that meddle with a popover, you'll desire to define a custom containerto make sure that the popover's HTML appears in that component as an alternative. $(function () $('.example-popover').popover( container: 'body' )) Static popover.

An elegant solution is to place the HTML-content inside a script-tag with an id and then add a data-target="element_id_goes_here" attribute to the element that will trigger the popover. Since you're using popover you should already have some generic JavaScript somewhere that initializes the plugin. You can extend this JavaScript with a few lines of code.

HTML

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-briefcase fa-fw"></i> 
        <abbr title="Panel title" data-container="body" data-toggle="popover" 
              data-placement="bottom" data-trigger="hover" data-html="true" 
              data-target="#my-popover-content">
          Panel title
        </abbr>
        <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
            <!-- some buttons go here -->
        </div>
    </div>
    <!-- /.panel-heading -->
    </div>
    <!-- some panel content goes here -->
</div>

<script type="text/html" id="my-popover-content">
    *** HTML CONTENT GOES HERE ***
</script>

JavaScript

$("[data-toggle='popover']").each(function(index, element) {
    var contentElementId = $(element).data().target;
    var contentHtml = $(contentElementId).html();
    $(element).popover({
        content: contentHtml
    });
});

Be able to use existing DOM element as popover content � Issue , Triggering popovers on hidden elements will not work. Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element. As a workaround, you'll want to trigger the popover from a wrapper < div> or Making popovers work for keyboard and assistive technology users. Attaches a popover handler to an element collection..popover('show') Reveals an element’s popover. It returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. popovers with zero-length titles are never displayed.

Solution, based on Martin Devillers post, but more flexible (passes all data-* tags into bootstrap js)

$("[data-toggle='popover']").each(function (index, element) {
    var data = $(element).data();
    if (data.target) {
        var contentElementId = data.target;
        var contentHtml = $(contentElementId).html();
        data.content = contentHtml;
    }
    $(element).popover(data);
});

How to Create Popovers with Bootstrap 4, This would let the popover work nicer with other JS frameworks, such as GitHub is home to over 50 million developers working together to host and review code, manage projects, and build Yeah, but the issue with using .html() is that it doesn't actually use the DOM element, +1 for introducing this feature in Bootstrap! Bootstrap popover is use to show information or HTML element.Bootstrap is very popular CSS framework to create elegant UI with in minute.This Bootstrap tutorial help to create beautiful popover using static information or HTML content.

About Alexus1024 solution : I had to add a "#" before data.target in order to have jquery correctly selecting the target :

var contentElementId = "#"+data.target;

Bootstrap Popovers, In this tutorial you will learn how to create popovers with Bootstrap. Note: To make this feature work properly across the browsers, you must use the <a> The popover's title and content will be inserted into the elements having the The following example will show you how to place the HTML content inside a popover :� Bootstrap Popover Form Example: This post explains about inserting html form into bootstrap popover. Bootstrap popover plug-in is a small overlay used to show some additional content in a webpage. You can place plain text, image, YouTube videos or other html inside bootstrap popover.

Bootstrap popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content. Triggering popovers on hidden elements will not work. Base HTML to use when creating the popover. You may pass multiple triggers; separate them with a space. 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.

The script to setup the popover: $('.user').popover({ trigger: 'hover', placement: 'top', html: true, content: //What goes here? I want to display the contents of the userInfo class }); The expected result when I hover over the user class would be to show a popover displaying the content contained in the sibling or child userInfo class.

The title of the popover is set in the button tag along with data-content attribute where you may use the content to display in the popover. In the script section, the ID of the button is used with .popover for initiating the Bootstrap popover. The popover is toggleable. If you click the button, it displays the popover.

Comments
  • Why did you ask and answer the question?
  • Because StackOverflow promotes Q&A-style content? blog.stackoverflow.com/2011/07/…
  • Sweet info. Now I can finally post the questions I put loads of work into, only to find the answer myself, just before being ready to post it :). There has at least been a couple of times where it probably would have been relevant to others as well :)
  • I like this solution as well so +1. No need to meddle with id's and you get to keep the popover content with the panel. The downsides are that it's designed specifically for panel's, makes assumptions about the whereabouts of the content and does not allow for reuse of popover contents.
  • This can be applied to any element in the DOM not just Bootstrap panels? Don't understand what you mean about assumptions of the whereabouts of the content? As for reuse, this can be changed to work with the jQuery hover method which can then check for a pre-existing popover and just show or hide accordingly.