Question

我使用uib-popover在鼠标悬停时显示工具提示。我知道，这可能是一个简单的解决方案，但对我来说却不起作用。问题是，我不知道为什么不能设置内联（水平）弹出窗口内容。这里正在工作plunker

<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="link in links">
  <a uib-popover popover-trigger="mouseenter" popover-placement="bottom" 
uib-popover-template="'tpl.html'">{{link.label}}</a>
</li>
</ul>

<script type="text/ng-template" id="tpl.html">
<div class="popover-content">
  <ul>
    <li ng-repeat="thumb in link.content track by $index" style="display: inline; margin: 5px">
      <img ng-src="{{thumb}}" width="100px">
    </li>
  </ul>
</div>

$scope.links = [
{
  label: 'Link 1',
  title: 'Link 1 title',
  content: ['https://cdn6.aptoide.com/imgs/e/b/e/ebecdfef11dbdc9c1158dc656331c451_icon.png?w=256', 'https://secure.gravatar.com/avatar/e48c85ca8276792face330c4b07424ad.jpg?d=retro&s=256&r=PG', 'https://getuikit.com/v2/docs/images/placeholder_200x100.svg']

},
{
  label: 'Link 2',
  title: 'Link 2 title',
  content: ['https://cdn6.aptoide.com/imgs/e/b/e/ebecdfef11dbdc9c1158dc656331c451_icon.png?w=256', 'https://secure.gravatar.com/avatar/e48c85ca8276792face330c4b07424ad.jpg?d=retro&s=256&r=PG', 'https://getuikit.com/v2/docs/images/placeholder_200x100.svg']
},
{
  label: 'Link 3',
  title: 'Link 3 title',
  content: ['https://cdn6.aptoide.com/imgs/e/b/e/ebecdfef11dbdc9c1158dc656331c451_icon.png?w=256', 'https://getuikit.com/v2/docs/images/placeholder_200x100.svg', 'https://secure.gravatar.com/avatar/e48c85ca8276792face330c4b07424ad.jpg?d=retro&s=256&r=PG', 'https://getuikit.com/v2/docs/images/placeholder_200x100.svg']
 }

 ];

无法设置内置弹出窗口内容

0 个答案: