元素与popover和工具提示

Question

在大型表格中，我使用弹出式窗口显示验证中的错误消息（我知道，不是最佳做法）。

现在，我还想添加工具提示以显示输入的详细说明。

但是，同时使用tooltip和popover指令（以及它们关联的-trigger和-placement指令），行为是奇数/错误：两者，工具提示和popover基于popover-placement指令（忽略tooltip-placement）放置 - 并显示为弹出窗口提供的文本。

<button class="btn btn-default"
    popover="Popover" popover-trigger="mouseenter" popover-placement="right" 
    tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>

请参阅此plunkr。

知道如何使这项工作吗？

Answer 1

他们实际上实际上使用了相同的贴装功能。

来自popover上的文档：

  

popover指令还通过 $tooltipProvider 支持各种默认配置。有关详细信息，请参阅工具提示部分。

如果您有以下代码，则含义：

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.options({
    'placement': 'right'
  });
}]);

它会更改工具提示和弹出窗口的默认值。

我能想到的最好的是它有一些围绕元素的包装，所以你可以依次做每一个。

<button class="btn btn-default sampleBtn"
  popover="Popover" popover-trigger="mouseenter" popover-placement="right">
  <span tooltip="Tooltip" tooltip-trigger="mouseenter"  tooltip-placement="top">
    Tooltip + Popover
  </span>
</button>

Demo in Plunker

Answer 2

一个非常简单的方法。只需为按钮创建一个父Span，并使用该Span附加这些属性。我也有一些代码

<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
       <button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>

这也是JS小提琴

http://jsfiddle.net/h75k1fzj/