Question

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

问题是弹出窗口是在创建推文标记之前呈现的，因此会发生这种调整大小效果（修改：通过默认情况下隐藏弹出窗口并在推文内容可用时将其显示来管理以改善此情况。）
在此过程中也删除了Tweet边框，因此其视觉效果并不好。

此处的相关代码：

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

结果是OK-ish，但仅在弹出窗口位置为顶部或底部时才有效，因为推文内容的宽度是已知的。如果左侧或右侧放置，则弹出窗口将从触发元素移开，因为推文内容的高度未知。

如何才能显示推文弹出窗口？感谢您的任何提示

在网页上的popover中显示推文

0 个答案: