ifi中的ui bootstrap工具提示截止

Question

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

---

更新

所以我试图覆盖工具提示位置（注意我使用angularjs ui bootstrap）。我有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 tooltip指令添加的引导类。我猜这不起作用，因为该指令实际上是在某处添加另一个元素。

Answer 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;
}