iframe中的ui引导工具提示截止答案

【问题标题】：ui bootstrap tooltip cutoff in iframeiframe中的ui引导工具提示截止
【发布时间】：2014-11-20 20:55:54
【问题描述】：

我有一个在 iframe 中运行的应用程序，它使用了 angular ui boostrap 工具提示。不幸的是，如果带有工具提示的元素位于 iframe 的边缘，则工具提示将被 iframe 截断。有什么解决办法吗？我应该使用它在 iframe 中的位置还是 z-index 值？

更新

所以我试图覆盖工具提示位置（请注意，我使用 angularjs ui 引导程序）。我有 2 个工具提示，每个都需要自己的定位。我设法在全球范围内更改了 css 样式（颜色和字体），但我无法针对每个样式赋予它们独特的位置。我有以下html和css：

<div id="my-div">
  <ul>
     <li tooltip="Foo">A</li>
     <li tooltip="Bar">B</li>
  </ul>
</div>

工具提示“Foo”需要与“Bar”不同的位置。所以我尝试使用以下css访问li标签，但它不起作用。

#my-div > ul > li:nth-child(1).tooltip.top  {
   margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top  {
   margin-left: 30px;
}

请注意，.tooltip.top 是通过 angularjs 工具提示指令添加的引导类。我猜这不起作用，因为该指令实际上是在某处添加另一个元素。

【问题讨论】：

【解决方案1】：

所以事实证明 angular 会在定义为工具提示的元素之后插入一个 div 元素。所以在我的例子中，当A 的工具提示事件被触发时，angular 会像这样插入新元素：

<div id="my-div">
  <ul>
    <li tooltip="Foo">A</li>
    <div><!-- tooltip for foo --></div>
    <li tooltip="Bar">B</li>
  </ul>
</div>

因此我想出的解决方案是为我的每个li 标签添加 id：

    <li id="foo-tip" tooltip="Foo">A</li>
    <li id="bar-tip" tooltip="Bar">B</li>

然后像这样访问 css 工具提示元素：

#foo-tip + div {
   margin-left: 25px;
}
#bar-tip + div {
   margin-left: 15px;
}

【讨论】：