Tooltip in iframe partially hidden by its parent

Question

we have a case where we are populating an iframe with some tags in it. A Tag is a square when you hover it you get a tooltip. The iframe is loaded in its parent.

The problem is that on the left and right the tooltip is partially under its parent. We are using Twitter bootstrap. What is the best way to tackle this problem? Costumization of the tooltip is possible but how can you now when the tooltip is partially under its parent. The list of tags in the iframe is not static and can grow dynamically. I also don't want to add more padding in the iframe itself.

Please see my professional drawing skills below.

Answer 1

The solution to this problem was to use qTip2 plugin

With this plugin you have a lot more options to position the tooltip. This was not possible with the default behavior of the twitter bootstrap tooltip.