IE6 form select overlays the qTip

[czarfloors]

I have qTip attached to the icons next to the Select elements in the form. In IE6 only, the qTip appears behind the Select dropdown.

[Craig]

czarfloors, could you update to the latest branch revision and see if this is still occuring please?

[dluis]

It happens in IE6 but it is not all the qtip, it is only the border and tip. The box is ok.
Didn't try it with 155 because I'm getting a Interfaces error in IE6.

Update: Try with version 109 and the Tip is behind the combo. The Border and Tip should use bgiframe also.

[Craig]

dluis, could you update to the new branch revision and see if you're still running into problems?

[dluis]

Interface problem gone.

121 still have the Tip behind the combo in IE6.

[Craig]

Problem should now be fixed as of the latest branch revision. Could you confirm this for me on your end dluis?

[dluis]

It is better than before but not yet perfect. The Border is in the front of the Combo but the tip is behind.

I'm still having problems with the Destroy. Tried also de hide and disable and couldn't make then to work either. I will make a new post just about this issue.

[Mr. Haddnin]

I'm having the same issue here. In IE6, if a <select> tag in even on the same page, the content of the tooltip is not visible. I can only see the corners. I went ahead and updated to the latest branch version, but still having the same problem.

[Craig]

I'm not seeing any problem with my version of IE6 I'm testing with... could you both send over your code and the IE version number your using please?

[dluis]

Craig,



Browser:
IE6 version 6.0.3790.3959
Update Versions: SP2
OS:
Windows 2003 Server SP2

Code:

JS Code

this.element.qtip({
                               content: this.element.attr("id") + ' ' +value,
                               position: { corner: { tooltip: 'leftMiddle', target: 'rightMiddle'} },
                               show: { solo: true, when: 'mouseover' },
                               hide:{when: 'mouseout' },
                               style:{ border: { width: 2, radius: 4 }, padding: 4, textAlign: 'left', 'font-size': '10px', tip: true, name: 'red' }
                            });

You can see in the image that the Border is OK now but the tip is behind.

[Mr. Haddnin]

Craig,

I'm testing in IE6 version 6.0.2900.2180 SP2 & 6.0.2900.5512 SP3

JS Code

$(document).ready(function(){
   $('#whyRem').qtip({   
         content: '<span class="tipTitle">Why Remember This Computer?</span><p>By checking this checkbox, you are registering this computer with. As a result you should not have to answer security questions each time you login to Internet Banking. You will still need to provide your User Id and Password each time you login. Please do not check Remember This Computer if you are using a public computer.</p>',
      position: {
            corner: {target: 'bottomRight', tooltip: 'topLeft'},
         adjust: { x: 12, y: 12, screen: true },
         target: 'mouse'
         },
 
      style: { 
            border: {width: 2, color: '#000', radius: 5},
         width: 240,
         padding: 5,
         background: '#000',
         color: '#fff'
      },
      show: { delay: 0 },
      hide: { fixed: true, delay: 1000 }
   });         
});

[Craig]

Ok guys think I solved the problem. Seems I was incorrectly setting the opacity of the iframe (woops). Update to the latest branch and see if it fixes the issue for you both .

[Mr. Haddnin]

Craig, I wish I had good news for you, but the tooltip is still broken in IE6. Only 4 rounded corners are visible.

[Mr. Haddnin]

So, I found out that putting this(filter:alpha(opacity=80) in the css is what's breaking it. But, when I remove the select form elements from the markup, it works just fine. Any ideas?

[Craig]

Mr. Haddnin, are you using a custom z-index for your tooltip? It could be that the iframe is actually taking z-index precedence over your tooltip.

[Mr. Haddnin]

Craig, not using z-index anywhere. I took out the alpha filter for IE6. It's just gonna have to be solid for IE6 users. Not a big deal, plus boss says I've spent too much time on this already. Time to go to production.

[Craig]

Sorry to be a pest Mr. Haddnin, but could you try the latest branch release and see if it makes any difference? Just changed a few properties around.

http://bazaar.launchpad.net/~craig.craig...runk/files

[Mr. Haddnin]

No problem Craig,

Now the tooltip only works in IE8 no matter what I do.

[Craig]

Mr. Haddnin, I can't seem to find the cause of this problem. I'm wondering if it might have something to do with the DOCTYPE your using on your page? I can't reproduce it in any of my tests...

[apv]

I had exactly the same problem today. Compounding the confusion was the fact that sometimes the background did cover the selects and sometimes it didn't. Sometimes the border did, sometimes not.

What fixed it was specifying a hard width instead of a min, max, or combination of the two.

Sidebar: I will also mention just because I'm here that I also tried the current dev branch out of the repository and it did not respect the max width in IE6. It gave 100% of the page's width.

Thanks!

[Craig]

apv, just updated the branch revision which fixes the 100% issue. But for some odd reason, I can't reproduce this bloody IE6 bug. the BGIFrame plugin seems to be working flawlessly on my end. Could you confirm this in the new branch?

[apv]

Hi again, Craig. Want to mention how great I think qTip is. Uh, it's great!

I'm a little swamped today but I'll try to come back and revisit this and see if I can put together a fail case to share (I can't show what I'm working on; firewall/proprietary data) for the IE6 thing. May IE6 die soon and never return to haunt us.

[cmc]

First of all great thx for "qtip"... It's a great tool...
Also... the filter:alpha(opacity=0); works like a charm when in css, but not when it's in api. For example:

JS Code

onShow: function() {
   $(".qtip-dark").css({'opacity':'0.5', '-moz-opacity':'0.5', '-webkit-opacity':'0.5', 
'filter':'alpha(opacity=50)', '-ms-filter':'"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"'});
},

It does work in FF, but not in IE.
Any ideas?