0

Here's my solution so far: http://codepen.io/ducu/pen/VvwgPq

Problem is that the popover is rendered before the tweet markup is created so there's this resizing effect happening (Edit: Managed to improve this by having the popover hidden by default and making it visible when tweet content is available).
Tweet border is also removed in the process so the visual effect of that is not nice.

Relevant code here:

<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>

<script>
// Create Tweets
$(".tweet").each(function() {
  var $tweet = $(this);
  $tweet.popover({
    container: $tweet,
    content: function() {
      var tweetId = String($(this).data("tweet-id"));
      var $target = $("<div>");
      $target.css("width", "245px");
      twttr.widgets.createTweet(tweetId, $target[0], {
          width: "250",
          cards: "hidden",
          conversation: "none"
        })
        .then(function(content) {
          if (typeof content !== 'undefined') {
            var $content = $(content);
            var $doc = $(content.contentDocument);
            $doc.find(".EmbeddedTweet").css("border", "0");
            $doc.find(".EmbeddedTweet-tweet").css("padding", "0");
            $content.parents(".popover").css("visibility", "visible");
          }
        });
      return $target;
    }
  });
  $tweet.on('hide.bs.popover', function () {
    $tweet.find(".popover").css("visibility", "hidden");
  });
});
</script>

Result is OK-ish, but only works when popover placement is top or bottom because the width of the tweet content is known. If placement is left or right the popover would be shifted away from the trigger element because the height of the tweet content is not known.

How can I show the tweet popover only when available? Thanks for any tips

ducu
  • 1,199
  • 2
  • 12
  • 14
  • 2
    The link to codepen is broken, I guess. – Roope Sep 01 '15 at 18:22
  • @Roope I see it works, can you try again please? – ducu Sep 01 '15 at 18:27
  • @ducu Not working on my side too, maybe because it's private or something? – Robin Carlo Catacutan Sep 01 '15 at 18:28
  • 1
    I would think you could load all the tweets on page load ? Then they will already be there when the user hovers over them. Right now it looks like they are being reloaded everytime. If for whatever reason you can't load on page load you could still cache the tweets so they wouldn't reload every time. – pizzarob Sep 01 '15 at 22:01
  • @realseanp thanks for the suggestion, tried that, it's too heavy for my use case as I have many tweets on the page – ducu Sep 02 '15 at 05:26
  • @Roope I fixed the pen, should be visible now – ducu Sep 02 '15 at 09:27

0 Answers0