元素与popover和工具提示

时间:2014-08-29 19:38:35

标签: angularjs twitter-bootstrap angular-ui-bootstrap

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

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

但是,同时使用tooltippopover指令(以及它们关联的-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

知道如何使这项工作吗?

2 个答案:

答案 0 :(得分:2)

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

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

screenshot

答案 1 :(得分:1)

一个非常简单的方法。只需为按钮创建一个父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/