Bootstrap 3 Tooltip - Flicking on MouseOut... Happening if it is inside iFrame

Question

I am using Bootstrap 3 and showing "Tooltip" onMouseOver which is working as expected. But whenever I am moving out the cursor, screen is flickering.

HTML:

<div data-toggle="tooltip" data-placement="left" title="Lorem ipsum">
Mouse Over
</div>

Script Initialization:

<!-- Tooltip -->
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- /Tooltip -->

I have tried with below options as well:

<script>...</script>
<script language="javascript">...</script> etc...

And also changing the script tag inside head element, inside body tag, outside body tag doesn't helped to achieve my desired result!

Answer 1

try adding data-container="body"

<div data-toggle="tooltip" data-placement="left" title="Lorem ipsum" data-container="body">
Mouse Over
</div>

Answer 2

Adding the following line worked for me:

data-container="body" data-placement="right" 

Answer 3

I was having exact similar problem..

Solved by changing animate.css class properties:

-webkit-animation-fill-mode: both;
animation-fill-mode: both;

to

-webkit-animation-fill-mode: none;
animation-fill-mode: none;