The tooltip appears ok, but the dropdown box closes automatically when I try to point the mouse on an item. This happen only on Internet Explorer, on the others browsers it works fine.
HTML code:
<table width="100%" cellpadding="0" cellspacing="2" border="0">
<tr>
<td width="20%" class="fundoTituloForm">Entidade:</td>
<td width="80%" class="bordaFormResp">
<select name="academia" id="academia" class="formulario vtip" title="Selecione a entidade que deseja">
JS code:
this.vtip = function() {
this.xOffset = -10; // x distance from mouse
this.yOffset = 20; // y distance from mouse
$(".vtip").unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
$('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
$('p#vtip #vtipArrow').attr("src", '../../imagens/vtip_arrow.gif');
$('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("fast");
},
function() {
this.title = this.t;
$("p#vtip").fadeOut("slow").remove();
}
)
.mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
jQuery(document).ready(function($){vtip();})
You can see at real here check with different browsers. Someone can help me?
Because IE8 doesn't support many jquery functions the same way as Chrome, Firefox or IE9. You will have to write an exception for IE8 behavior to either bypass what you are trying to do or to process through an alternate option for IE8 browsers.