Html Inside Twitter Bootstrap Popover

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.

HTML tags inside Bootstrap popover are not rendered

You simply need to add to the options

sanitize: false

and it will not sanitize the contents, and renders the input fields as desired, as listed in the options here: https://getbootstrap.com/docs/4.3/components/popovers/#options

Full example:

$(function(){
  $("[data-toggle=popover]").popover({
    sanitize: false // <-- ADD HERE
    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();
    }
  });
});

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

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

Bootstrap 4 Popover with HTML Content

Just wrap the popover class in single quotes like this.

<div class='popover'>text text</div>

instead of

<div class="popover">text text</div>

Can I use html tags in twitter-bootstrap popover data-content?

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

Then the link syntax would be:

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %>

If you're dynamically generating the content, then you need to use html_safe like David suggested so Rails doesn't escape the HTML code. Otherwise, you can just place HTML directly within that content attribute.

Bootstrap 3 - Popover div html

There is a code for normalization bootstrap popovers:

multiply popovers
popovers with close button
close by click outside the popover
popover with custom HTML

Check out the demo

Source code download

    $( document ).ready(function() {

$('.popup-window').popover({
    html: true,
    title : '<button type="button" class="close" onclick="$(".popup-window").popover("hide");">×</button>',
    trigger: 'manual',
    content: function () {
        return $(this).next('.popup-content').html();
    }
}).click(function(e) {
    $(this).popover('toggle');
    $('.popup-window').not(this).popover('hide');

    e.stopPropagation();
});

$('body').on('click', function (e) {
    $('.popup-window').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });

});

and html

        <div class="actions">

        <!-- Action  -->
        <div class="popup-window" data-placement='left'>
            <i title='Share' class="btn-popup fa fa-share-alt"></i>
        </div>
        <div class="popup-content hide">
            <div class="socialShare">
                <label class="form-group">Share:</label>
                <div class="well">
                    <a title="Share on twiiter" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-twitter-square"></i>
                    </a>
                    <a title="Share on facebook" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-facebook-square"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Action -->
        <div class="popup-window" data-placement='bottom'>
            <i  title='Respond To Review' class="btn-popup fa fa-share-square-o"></i>
        </div>
        <div class="popup-content hide">
            <div class="">
                <label class="form-group">Respond To Review:</label>
                <div class="form-group">
                    <textarea class="form-control">Great song BRO!</textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary respondToReview width100" onclick="respondToReview(this);">Post Response</button>
                </div>
            </div>
        </div>



    </div>

and css

   .actions .popover-content {
    padding: 20px 40px;
}
.actions .popup-window,
.action-link {
    display: inline-block;
    margin-right: 5px;
    line-height: 20px;
    border-radius: 5px;
    padding: 7px;
    width: 34px;
    height: 34px;
    background-color: #2fa0e5;
    color: #fff;
    cursor: pointer;
}
.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus {
    opacity: 0.85;
}
.action-link:last-child,
.actions .popup-window:last-child {
    margin-right: 0;
}
.btn-popup.fa {
    font-size: 20px;
    cursor: pointer;
}
.actions .popover-title {
    background-color: transparent;
    border-color: transparent;
    float: right;
}
.actions .popover-content .form-group:first-child {
    margin-top: 10px;
}
.actions .popover-content .well {
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
.actions .popover-content .well a {
    margin: 0 10px 0 0;
}

External HTML file in Bootstrap Popover content

When you are not cross-domaining', i.e. you are not loading google.com or similar into the iframe, it is relatively easy.

Declare the below function, which takes the popover element (.pop-right) and the popover content <iframe> as parameters :

function adjustPopover(popover, iframe) {
    var height = iframe.contentWindow.document.body.scrollHeight + 'px',
        popoverContent = $(popover).next('.popover-content');
    iframe.style.height = height;
    popoverContent.css('height', height);
}

1) get scrollHeight of the iframe (the real height)

2) get the .popover-content <div> associated with .pop-right

3) set .popover-content to the real height, and do the same with the <iframe> to avoid scrollbars.

Then, in your popover initialisation call adjustPopover() in the iframes onload-event with onload="adjustPopover(".pop-right", this);" :

$('.pop-right').popover({ 
   title : 'Loading External File',
   html : true,
   placement : "right",
   content: function() {
       return '<iframe src="content.html" style="border:none" onload="adjustPopover(".pop-right", this);"></iframe>';    
   }
});

It is a good idea to set a minimum height for the iframes. If you dont do that, popovers will always have at least the browsers default height of an iframe, in chrome 150px.

iframe {
    height: 40px;
    min-height : 40px;
}

Here is an jsfiddle example loading the jsfiddle file /css/normalize.css -> http://jsfiddle.net/ovky3796/

As you see, I also changes .popover max-width in the demo. This is for demonstration only, if you want to adjust the width of the popover according to the content of the <iframe>, do the same as above with scrollWidth instead.

HTML inside Twitter Bootstrap 3 popover

The Bootstrap popover works fine with your code. If you want to put the entire html of popover_content_wrapper inside the popover, you should use .clone() instead of .html()

http://www.bootply.com/121357

.html() will just get the inside of popover_content_wrapper, which results in the text "HIDDEN CONTENT" to show in the popover

Bootstrap 4 popover a div

I am assuming that you want the contents of the pop-inn div to be what is displayed in the popover when you click the button?

So there are a few things I have changed in the working snippet below. First off, for a popover to be able to be dismissed when clicking outside of it, it must be an <a> tag, not a <button>, but you can style links as buttons (which is why I added the btn btn-primary classes.)

Then I passed a bunch of options to the .popover() method.

html: true tells it that it is displaying html, not plain text.
trigger: 'focus' tells it to dismiss the popover when you click outside it.
content: tells it what to place in the popover. In this case, I just made a function that grabs the html content of the pop-inn div. (The content option needs to use a function to return html, or you get an error).

Hope this helps!

$(function () {  $(".pop-show").popover({    html: true,    trigger: "focus",    content: function() {      return $('.pop-inn').html();    }  });})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<a class="pop-show btn btn-primary" tabindex="0" type="button" style="margin:100px;" data-toggle="popover" title="Your Popover Title" data-content="">Show</a>
<div class="pop-inn" style="display:none;">    <p>content</p>    <h5><img src="img.png" alt="image">Candidate</h5></div>

Html Inside Twitter Bootstrap Popover