Html Inside Twitter Bootstrap Popover

Get dynamic with your content

A static, boring popover? Not here! We can make content dynamic for popovers:

$('#popoverElement').popover({
  html: true,
  content: function() {
    return $('#contentForPopover').html(); // Abracadabra! Dynamic content!
  }
});


In this trick, we use a function to content. It pulls HTML from a hidden div or generates it on-the-fly.

Say no to content spoofing

While loading HTML content into a popover, be mindful of security. We don't want to be the party where XSS attacks sneak in. Ensure you sanitize the content:

const safeContent = DOMPurify.sanitize(unsafeContent); // Who invited this unsanitized content?
$('#popoverElement').popover({
  html: true,
  content: safeContent // Always keep things clean!
});


Customize your triggers and position occupiers

Don't like the defaults? With data-trigger and data-placement, you can don the customization cape:

<a role="button" data-toggle="popover" data-trigger="focus" data-placement="right" title="Dismissible popover" data-content="Guess what's in the popover?" >Click to toggle popover</a>


Specify all the things: content, title tags

Keep your code neat with data-content and data-original-title or title:

<button type="button" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="Your journey to the popover starts here.">
  Popover on top
</button>


data-container="body" helps keep your popovers snuggled within the body, preventing overflow issues.

Tidy up your content

Here's a tip on making your popovers look neat: Hook the content in hidden divs:

<div id="contentForPopover" style="display: none;">
  <img src="image.jpg"> <!-- No peeking, this is for the popover! -->
  <!-- Last night HTML and JavaScript had a fight, so they're separating -->
</div>


Error checking, because everybody makes mistakes

Whoops, did I forget to initialize the popovers? Always cross-validate your attributes and bring up the popovers post any related JavaScript code:

// Shh! Secretly initializing popovers…
$(function(){
  $('.popover-with-html').popover({ html: true });
});


And the golden rule—always test. Your popover could have stage fright in some browsers!

Tips & Tricks (top-hat, rabbit, and wand not included)

Wave your hands, make your content dynamic with JS

Add a magic touch to your popover's content:

$("#dynamicPopover").popover({
  html: true,
  content: fetchDynamicContent // Like rabbits from a hat!
});


Anchor tags, not your ship's anchor

While using <a> tags, set href with care and event.preventDefault() to keep them under control within the popover.