Tooltip hover flickering

Question

I'm trying to add tooltips (via Bootstrap) such that when you hover over an image, it shows the tooltip after a 500ms delay. The image has a regular state and a hover state:

CSS:

.image {
  background-image: url('../img/test.png');
  background-repeat: no-repeat;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.image:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

HTML:

<div class="image"></div>

JavaScript:

$('.image').tooltip({title: 'Text', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});

The problem is that when I hover over the image to check the tooltip, the image flashes without ever showing the tooltip, as such:

Answer 1

Seems to work just fine. Are you not including jQuery, or perhaps since you forgot to assign a height and width it's popping up somewhere you don't expect?

jsfiddle : http://jsfiddle.net/8S7kP/1/