views:

29

answers:

0

This is in continuation of the Question: http://stackoverflow.com/questions/2099564/how-to-add-tooltip-to-a-drop-down-combobox

I am using following script to show the tooltip on drop down

jQuery('#myDropDownID').hover(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12; 
                jQuery("body").append("<div id='myTooltip' class='portal-tool-tip' style='position: absolute; z-index: 100; display: none;'>" + jQuery("OPTION:selected", this).text()  + "</div>");
                if(jQuery.browser.msie) var tipWidth = jQuery("#myTooltip").outerWidth(true)
                else var tipWidth = jQuery("#myTooltip").width()
                jQuery("#myTooltip").width(tipWidth);
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            }, function(){
                jQuery("#myTooltip").remove();              
            }).mousemove(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                var tipWidth = jQuery("#myTooltip").outerWidth(true);
                var tipHeight = jQuery("#myTooltip").outerHeight(true);
                if(tipX + tipWidth > jQuery(window).scrollLeft() + jQuery(window).width()) tipX = e.pageX - tipWidth;
                if(jQuery(window).height()+jQuery(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            });

This script is working fine for me. Now, the only problem which i am facing is, In IE it is working as it is expected. But in FF, it shows the tooltip even when the drop down is open for selection. I guess, in IE the mouseover or hover event is not fired when we are trying to select any element, while in FF this event is fired. How to fix this problem?

Check this out: http://jsbin.com/owoka