IE8，jQuery UI Tooltip在Internet Explorer 8中立即关闭

Question

The setup

We have a jQuery UI tooltip that is displayed via a mouseenter event attached to the <div class="fieldset"> (.fieldset) element inside the form element. When the mouse leaves the div, the tooltip should disappear.

The problem

In IE8, and only IE8, the tooltip disappears immediately when you hover over the area of the .fieldset element. IE8 behaves as if the child elements are not actually decedents of the parent element, or as if the tooltip is using the mouseover and mouseout events. However, we are using the mouseenter and mouseleave events for this tooltip.

I have tried giving the .fieldset element a solid background. I also tried a transparent image. I've checked the z-index of the child elements to make sure there weren't different. Nothing I do seems to work.

I need the tooltip to stay displayed while the mouse hovers over the .fieldset element and any of its children.

Code

HTML:

<form class="form centerBH" id="form" style="display: block; zoom: 1;">

    <div class="fieldset">

        <h2 class="legend">Autogenerated Image Links</h2>

        <div id="image" class="panebox" >
        <div class="ui-widget"> 
            <ul>

            </ul>
        </div>      
        </div>

    </div>
</form>

CSS:

.form {

    width: 50em;

    /* correct margin collapse in IE */
    overflow: auto;
}

/* ensure all form elements will fade in and out */
form * {

    filter: inherit;

}

.panebox {

    background-color: #F7F7F7;

    border-color: #B7B9BD;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;

    box-shadow:  0px 1px 0px 0px rgba(255,255,255,.7), 0px 1px 2px 0px rgba(0,0,0,.1);

    margin: 7px;
    padding: 14px;

    position: relative;

    overflow: hidden;
}

JavaScript:

Again, I'm using jQuery UI tooltip, which automagically binds to any elements that have a title attribute defined. However, I have tried explicitly attaching the mouseenter and mouseleave events to the .fieldset div, to display and hide the tooltip, but I still get the same behavior.

Here is how I setup the tooltip:

this.fieldsetTooltip=this.$(".fieldset").tooltip({

            content: 'Click an image link to open that image.',
            disabled: true,
            items: ".fieldset",
            position: {
                my:"left+20 top+25", 
                at:"right top",
                collision: "none",
                using: function( position, feedback ) {

                    //console.log(feedback.target.width);

                    $( this ).css( position );

                    $( "<div>" )
                        .addClass( "arrow" )
                        .addClass( feedback.vertical )
                        .addClass( feedback.horizontal )
                        .appendTo( this );
                }

            }
        });          

Here is how I manually open and close the tooltip:

this.$el.on("mouseenter",'.fieldset',function(e){

        console.log("Mouse entering .fieldset");
        _this.fieldsetTooltip.tooltip("open");


});


this.$el.on("mouseleave",'.fieldset',function(e){

        console.log("Mouse leaving .fieldset");
        _this.fieldsetTooltip.tooltip("close");


});

We also trigger a custom resize event when the window object triggers it's resize event.

// close tooltip when user resizes the window
this.listenTo(AppReg.events,"context:resized",function() {

        _this.fieldsetTooltip.tooltip("close");
}); 

Update Based on the console log from the above events, the mouseenter and mouseleave events are firing as they should. However, I think the jQuery UI tooltip is binding a different event to the element (maybe a 'mouseout'?), which is causing it to close automatically.

Anybody know how this can be stopped?

Answer 1

The culprit to the problem is the way that IE8 handles the resize event. I was attaching a resize event handler on the window object, using $(window).resize() . For some reason, IE8 was firing the resize event whenever the tooltip was displayed.

I used the solution from this post: window.resize event firing in Internet Explorer

Basically, you have to check to make sure the window's dimensions actually changed before firing the event.

Answer 2

I had a bit similar issue on Nokia Lumia 520 Internet Explorer 11 (IE 11). I added additional code for showing tooltip:

$(".has_tooltip").tooltip();
if (/Lumia/.test(navigator.userAgent) && getInternetExplorerVersion() == 11)
        {
                $(".has_tooltip").click(function(){
                    $(this).tooltip("open");
                })
        }

So, in my case, $(this).tooltip("open"); does the trick.

*in my mobile app tooltip is appearing when element is clicked.