IE8，jQuery的用户界面工具提示在Internet Explorer 8

的设置IE8，jQuery的用户界面工具提示在Internet Explorer 8

我们有一个通过连接到表格元素内的<div class="fieldset">（.fieldset）元件的mouseenter事件显示一个jQuery UI工具提示立即关闭。当鼠标离开div时，工具提示应该消失。

问题

在IE8中，只有IE8，当你将鼠标悬停在.fieldset元件的面积工具提示立即消失。 IE8的行为就好像子元素实际上不是父元素的死角，或者好像工具提示正在使用mouseover和mouseout事件一样。但是，我们正在使用此工具提示的mouseenter和mouseleave事件。

我曾尝试给.fieldset元素一个坚实的背景。我也尝试了一个透明的图像。我已检查了子元素的z-index以确保没有不同。我做的没有任何事情似乎有效。

我需要工具提示在鼠标悬停在.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提示，从而自动地结合到任何具有已定义标题属性的元素。但是，我试图明确附加mouseenter和mouseleave事件到.fieldset股利，以显示和隐藏工具提示，但我仍然得到相同的行为。

下面是我设置的提示：

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事件被解雇，因为他们应该。但是，我认为jQuery UI工具提示将一个不同的事件绑定到元素（可能是'mouseout'？），这会导致它自动关闭。

有人知道这可以停止吗？

来源

2013-10-25 Zengineer

你是否参加过演示（包括js）？ – r0m4n

这将是非常困难的，因为这是一个非常大的单页网页应用程序。我试图缩小上面的部分，但是，让我看看我能做些什么。 – Zengineer

是的，看看你是否可以找到问题的子集 – r0m4n

问题的根源在于IE8处理resize事件的方式。我使用$(window).resize()在窗口对象上附加了一个resize事件处理程序。出于某种原因，只要显示工具提示，IE8就会触发resize事件。

我使用这个职位的解决方案：window.resize event firing in Internet Explorer

基本上，你必须检查，以确保触发事件之前窗口的尺寸实际上改变。

来源

2013-11-06 16:33:34 Zengineer

我在诺基亚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");的伎俩。

*在我的移动应用程序工具提示出现时单击元素。

来源

2017-08-24 16:35:45 murrometz

IE8，jQuery的用户界面工具提示在Internet Explorer 8

回答

相关问题