Databases
StackOverflow2013
Postsdbo
POIE8, jQuery UI Tooltip closes immediately in Internet Explorer 8
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8, jQuery UI Tooltip closes immediately in Internet Explorer 8
    text
    copied!<p><strong>The setup</strong></p> <p>We have a jQuery UI tooltip that is displayed via a <code>mouseenter</code> event attached to the <code>&lt;div class="fieldset"&gt;</code> (.fieldset) element inside the form element. When the mouse leaves the div, the tooltip should disappear.</p> <p><strong>The problem</strong></p> <p>In IE8, and only IE8, the tooltip disappears immediately when you hover over the area of the <code>.fieldset</code> element. IE8 behaves as if the child elements are not actually decedents of the parent element, or as if the tooltip is using the <code>mouseover</code> and <code>mouseout</code> events. However, we are using the <code>mouseenter</code> and <code>mouseleave</code> events for this tooltip. </p> <p>I have tried giving the <code>.fieldset</code> element a solid background. I also tried a transparent image. I've checked the <code>z-index</code> of the child elements to make sure there weren't different. Nothing I do seems to work.</p> <p>I need the tooltip to stay displayed while the mouse hovers over the <code>.fieldset</code> element and any of its children.</p> <p><strong>Code</strong></p> <p>HTML:</p> <pre><code>&lt;form class="form centerBH" id="form" style="display: block; zoom: 1;"&gt; &lt;div class="fieldset"&gt; &lt;h2 class="legend"&gt;Autogenerated Image Links&lt;/h2&gt; &lt;div id="image" class="panebox" &gt; &lt;div class="ui-widget"&gt; &lt;ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>CSS:</p> <pre><code>.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; } </code></pre> <p>JavaScript: </p> <p>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 <code>mouseenter</code> and <code>mouseleave</code> events to the <code>.fieldset</code> div, to display and hide the tooltip, but I still get the same behavior.</p> <p>Here is how I setup the tooltip:</p> <pre><code>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 ); $( "&lt;div&gt;" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); </code></pre> <p>Here is how I manually open and close the tooltip:</p> <pre><code>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"); }); </code></pre> <p>We also trigger a custom resize event when the window object triggers it's resize event.</p> <pre><code>// close tooltip when user resizes the window this.listenTo(AppReg.events,"context:resized",function() { _this.fieldsetTooltip.tooltip("close"); }); </code></pre> <p><strong>Update</strong> Based on the console log from the above events, the <code>mouseenter</code> and <code>mouseleave</code> 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.</p> <p>Anybody know how this can be stopped?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload