0

到目前为止，这是我的解决方案：http: //codepen.io/ducu/pen/VvwgPq

问题是弹出框是在创建推文标记之前呈现的，因此会发生这种调整大小的效果（编辑：通过默认隐藏弹出框并在推文内容可用时使其可见来改善这一点）。
推文边框也在这个过程中被移除，所以视觉效果并不好。

相关代码在这里：

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

结果还可以，但仅当弹出框放置在顶部或底部时才有效，因为推文内容的宽度是已知的。如果放置在左侧或右侧，则弹出框将远离触发元素，因为推文内容的高度未知。

如何仅在可用时显示推文弹出框？感谢您的任何提示

4

0 回答 0