Scenario
We are encountering an issue with a jQuery UI tooltip that is triggered by a mouseenter event on the <div class="fieldset"> (.fieldset) element within a form. The problem arises in IE8, where the tooltip disappears immediately upon hovering over the .fieldset area. It seems like IE8 treats the child elements as separate from the parent element or uses the mouseover and mouseout events instead of the intended mouseenter and mouseleave.
Attempts have been made to resolve this issue by applying a solid background or transparent image to the .fieldset element, adjusting the z-index of child elements, but none have proven successful. The goal is to keep the tooltip displayed when hovering over both the .fieldset element and its children.
Code Snippets
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:
The setup involves using jQuery UI tooltip, which automatically binds to elements with a title attribute. Despite explicitly attaching the mouseenter and mouseleave events to the .fieldset div for showing and hiding the tooltip, the issue remains.
Configuration of 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 );
}
}
});
Manual control of tooltip display:
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");
});
A custom resize event triggers closing the tooltip when the window resizes.
// close tooltip when user resizes the window
this.listenTo(AppReg.events,"context:resized",function() {
_this.fieldsetTooltip.tooltip("close");
});
Update
Debug logs confirm that the mouseenter and mouseleave events are functioning correctly. However, it is suspected that the jQuery UI tooltip might be utilizing a different event (like 'mouseout'), leading to automatic closure. Seeking insights on how to prevent this behavior.
Any suggestions to address this challenge?