/embedded-tweet-html-content-in-boostrap-popover.markdown

## embedded-tweet-html-content-in-boostrap-popover.markdown

      
    Raw
  

              embedded-tweet-html-content-in-boostrap-popover.markdown
            
          
    Embedded Tweet & Html Content in Boostrap Popover

A Pen by Alexandre Magnier on CodePen.
License.

  
## index.html
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</head>
<body>
	<h1> TWEET FEED IN BOOSTRAP POPOVER </h1>

  <div><button id="target">TRY ME</button></div>

<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">5 mai 2014</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

</body>
</html>

## script.js
$(document).ready(function() {

    // We don't want to see the popover contents until the user clicks the target.
    // If you don't hide 'blah' first it will be visible outside of the popover.
    //
    $('#blah').hide();

    // Initialize our popover
    //
    $('#target').popover({
        content: $('#blah'), // set the content to be the 'blah' div
        placement: 'bottom',
        html: true
    });
    // The popover contents will not be set until the popover is shown.  Since we don't
    // want to see the popover when the page loads, we will show it then hide it.
    //
    $('#target').popover('show');
    $('#target').popover('hide');

    // Now that the popover's content is the 'blah' dive we can make it visisble again.
    //
    $('#blah').show();


});
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
	</head>
	<body>
	<h1> TWEET FEED IN BOOSTRAP POPOVER </h1>

	<div><button id="target">TRY ME</button></div>

	<!-- This will be the contents of our popover -->
	<div class='_content' id='blah'>
	<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Sunsets don't get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>— US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">5 mai 2014</a></blockquote>
	<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

	</div>

	</body>
	</html>
	$(document).ready(function() {

	// We don't want to see the popover contents until the user clicks the target.
	// If you don't hide 'blah' first it will be visible outside of the popover.
	//
	$('#blah').hide();

	// Initialize our popover
	//
	$('#target').popover({
	content: $('#blah'), // set the content to be the 'blah' div
	placement: 'bottom',
	html: true
	});
	// The popover contents will not be set until the popover is shown. Since we don't
	// want to see the popover when the page loads, we will show it then hide it.
	//
	$('#target').popover('show');
	$('#target').popover('hide');

	// Now that the popover's content is the 'blah' dive we can make it visisble again.
	//
	$('#blah').show();


	});