IE8，jQuery UI Tooltip在Internet Explorer 8中立即關閉

Question

設置

我們有一個通過一個顯示一個jQuery UI工具提示mouseenter附加到事件<div class="fieldset"> （.fieldset）形式元素中的元素。 當鼠標離開div時，工具提示應消失。

問題

在IE8中（只有IE8中），當您將鼠標懸停在.fieldset元素的區域上時，工具提示會立即消失。 IE8的行為就像子元素實際上不是父元素的后代一樣，或者工具提示使用的是mouseover和mouseout事件。 但是，我們在此工具提示中使用mouseenter和mouseleave事件。

我嘗試為.fieldset元素提供扎實的背景。 我還嘗試了透明圖像。 我檢查了子元素的z-index ，以確保它們沒有什么不同。 我似乎無濟於事。

當鼠標懸停在.fieldset元素及其.fieldset元素上時，我需要工具提示保持顯示狀態。

碼

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：

同樣，我使用的是jQuery UI工具提示，它自動綁定到定義了title屬性的任何元素。 不過，我已經試過了明確安裝mouseenter和mouseleave事件到.fieldset DIV，顯示和隱藏工具提示，但我仍然得到同樣的行為。

這是我設置工具提示的方式：

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 );
                }

            }
        });          

這是我手動打開和關閉工具提示的方法：

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");


});

當窗口對象觸發其調整大小事件時，我們還將觸發一個自定義調整大小事件。

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

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

更新根據上述事件的控制台日志， mouseenter和mouseleave事件將按mouseleave觸發。 但是，我認為jQuery UI工具提示正在將一個不同的事件綁定到該元素（可能是“ mouseout”？），這導致它自動關閉。

有人知道如何可以停止嗎？

Answer 1

問題的根源在於IE8處理調整大小事件的方式。 我正在使用$(window).resize()在窗口對象上附加一個調整大小事件處理程序。 由於某種原因，每當顯示工具提示時，IE8都會觸發調整大小事件。

我使用了這篇文章中的解決方案： Internet Explorer中觸發window.resize事件

基本上，您必須在觸發事件之前檢查以確保窗口的尺寸實際發生了變化。

Answer 2

我在諾基亞Lumia 520 Internet Explorer 11（IE 11）上遇到了類似的問題。 我添加了用於顯示工具提示的其他代碼：

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

因此，就我而言， $(this).tooltip("open"); 絕招。

*單擊元素時，將在我的移動應用程序中顯示工具提示。