Показать твит в поповере на веб-странице

Вот мое решение до сих пор: 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>

Результат в порядке, но работает только тогда, когда размещение всплывающего окна сверху или снизу, потому что ширина содержимого твита известна. Если размещение будет левым или правым, поповер будет смещен от элемента триггера, потому что высота содержимого твита неизвестна.

Как я могу показывать твит-поповер только тогда, когда он доступен? Спасибо за любые советы

0 ответов

Другие вопросы по тегам