ui bootstrap tooltip cutoff in iframe - angularjs

Question

I have an app running in an iframe and it makes use of angular ui boostrap tooltips. Unfortunately if the element with the tooltip is on the edge of the iframe, the tooltip will be cutoff by the iframe. Is there any solution to this? Should I play with its position within the iframe, or the z-index value?
UPDATE
So I'm trying to override the tooltip positions (note that I an using angularjs ui bootstrap). I have 2 tooltips which each require their own positioning. I managed to change the css styles (colours and fonts) globally, but I'm having trouble targeting each one to give them unique positions. I have the following html and css:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<li tooltip="Bar">B</li>
</ul>
</div>
Tooltip "Foo" needs a different position that "Bar". So I'm trying to access the li tags using the following css, but it doesn't work.
#my-div > ul > li:nth-child(1).tooltip.top {
margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top {
margin-left: 30px;
}
Note that .tooltip.top is the bootstrap class added via the angularjs tooltip directive. I'm guessing this doesn't work because the directive is actually adding another element somewhere.

Answer 1

So it turns out angular will insert a div element right after the element defined as the tooltip. So in my case, when the tooltip event for A is triggered, angular inserts the new element like so:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<div><!-- tooltip for foo --></div>
<li tooltip="Bar">B</li>
</ul>
</div>
Therefore the solution I came up with was to add id's to each of my li tags:
<li id="foo-tip" tooltip="Foo">A</li>
<li id="bar-tip" tooltip="Bar">B</li>
and then access the css tooltip element like so:
#foo-tip + div {
margin-left: 25px;
}
#bar-tip + div {
margin-left: 15px;
}