Skip to content

Instantly share code, notes, and snippets.

@ducu

ducu/show_tweet.html

Last active September 1, 2015 18:34
Show Gist options
  • Save ducu/cd8a8fb5bc0e50391008 to your computer and use it in GitHub Desktop.
Save ducu/cd8a8fb5bc0e50391008 to your computer and use it in GitHub Desktop.
Download ZIP
Show tweet in popover
Raw
show_tweet.html
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//platform.twitter.com/widgets.js"></script>
</head>
<body>
Show tweet in popover
---------------------
Problem is that the popover is rendered before the tweet markup is created so there's this resizing effect happening. Tweet border is also removed in the process so the visual effect of that is not nice. Anyone can think of a better solution? Thanks
<div>Hover on these few tweets from @CodePen:
<a class="tweet" href="https://twitter.com/CodePen/status/638726422027177984" rel="popover" role="button" data-toggle="popover" data-placement="bottom" data-animation="false" data-html="true" data-trigger="hover" data-tweet-id="638726422027177984">tweet</a>,
<a class="tweet" href="https://twitter.com/CodePen/status/637003841163104256" rel="popover" role="button" data-toggle="popover" data-placement="bottom" data-animation="false" data-html="true" data-trigger="hover" data-tweet-id="637003841163104256">tweet</a>, and
<a class="tweet" href="https://twitter.com/CodePen/status/636982093181022208" rel="popover" role="button" data-toggle="popover" data-placement="bottom" data-animation="false" data-html="true" data-trigger="hover" data-tweet-id="636982093181022208">tweet</a>.
</div>
A [Pen](http://codepen.io/ducu/pen/0789af6b220b8283ef94a1dfcaa02a42) by [Alexandru Stanciu](http://codepen.io/ducu) on [CodePen](http://codepen.io/).
[License](http://codepen.io/ducu/pen/0789af6b220b8283ef94a1dfcaa02a42/license).
<script>
// Create Tweets
$(".tweet").each(function() {
var $elem = $(this);
$elem.popover({
container: $elem,
content: function() {
var anchor = $(this)[0];
var tweetId = String($(this).data("tweet-id"));
var target = document.createElement("div");
target.style.width = "245px";
twttr.widgets.createTweet(tweetId, target, {
width: "250",
cards: "hidden",
conversation: "none"
})
.then(function(el) {
var doc = el.contentDocument;
doc.querySelector(".EmbeddedTweet").style.border = "0";
doc.querySelector(".EmbeddedTweet-tweet").style.padding = "0";
});
return target;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment