A Pen by Alexandre Magnier on CodePen.
Created
March 16, 2018 13:31
-
-
Save anonymous/b2101bea11662d7a6836bf2da50e0378 to your computer and use it in GitHub Desktop.
Embedded Tweet & Html Content in Boostrap Popover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment