UI Bootstrap 带有模板的弹出窗口 Moving/Jumping 当鼠标移动时

Question

我创建了一个 UI Bootstrap 弹出窗口，用于将内容共享到不同的社交网站。它使用模板。

单击 'share' 图标后，弹出窗口打开。但是，它在应该打开的位置右侧打开得很好，然后当我移动鼠标时，它突然移动（相当远）到它最初应该打开的位置。这一切都非常奇怪。

html 看起来像这样：

<div class="category-header-top">Anthropology
  <img class="share-icon-svg" uib-tooltip="share" tooltip-placement="top"
    tooltip-is-open="shareTooltipOpen" ng-click="shareIconClicked()"
    popover-template="'sharePopoverTemplate.html'" popover-is-open="sharePopoverOpen"
    popover-placement="bottom" popover-append-to-body="true" src="share.svg">

  <script type="text/ng-template" id="sharePopoverTemplate.html">
    <div class="share-popover-div"><!--
      --><img class="share-svg" src="facebook-24px.svg"><!--        
      --><img class="share-svg" src="twitter-24px.svg"><!--
      --><img class="share-svg" src="gplus-24px.svg"><!--
      --><img class="share-svg" src="linkedin.svg"><!--
      --><img class="share-svg" src="pinterest.svg"><!--
      --><img class="share-svg" src="tumblr.svg"><!--
      --><img class="share-svg" src="reddit.svg">
    </div>
  </script>   
</div>

我已经模拟了一个 plnkr，它以其所有的荣耀显示了确切的问题。 http://plnkr.co/edit/I5YvW1mgCYx4uDcegL4u

有什么办法可以阻止这种情况吗？

Answer 1

尝试为每个 dividual img 标签添加宽度属性。

<img class="share-svg" src="facebook-24px.svg" width="24">

这将允许 share-popover-div 在图标 img 加载之前根据子项的宽度正确计算其 size/position，希望能防止跳跃。

UI Bootstrap 带有模板的弹出窗口 Moving/Jumping 当鼠标移动时

UI Bootstrap Popover With Template Moving/Jumping When Mouse Moves

twitter-bootstrap

angularjs

angular-ui-bootstrap