[Solved] IE 8 "Style > Tip" not displaying

[shameless hacker]

Greetings.

Have a tooltip that seems to be working swimmingly in FF, but not IE8.

JS Code

window.myqtip = $(this).qtip({
         tip: true ,
          api: {
            beforeTitleUpdate: function(){
               $('.qtip:visible').qtip("hide");
            }
         },
         show: 'mouseover',
         hide: 'mouseout',
         position: {
            corner: {
               target: 'rightMiddle',
               tooltip: 'leftMiddle'
            }
         },
         style: { 
               width: 200,
               padding: 5,
               background: '#A2D959',
               color: 'black',
               textAlign: 'left',
               border: {
                  width: 7,
                  radius: 5,
                  color: '#A2D959'
               },
               tip: 'leftMiddle',
               name: 'green' // Inherit the rest of the attributes from the preset dark style
            }
      });

Looke like this in ie8 (note the absence of the little pointy corner things appearing at position "leftMiddle"):



Again, seems to work fine in FF.

Tooltip js: ver. jquery.qtip-1.0.0-rc3.min.js


Most puzzling; anyone else seen this before or happen to know of the fix?

TIA

Sahmeless

[Craig]

Are you using jQuery 1.4.x by any chance? This is a known issue with it at the moment, but is fixed in the pre-cursor branch dustmoo has set up:

http://github.com/dustmoo/qtip

[shameless hacker]

Uh, yes. I am using JQuery 1.4 via the Google AJAX loader.

Whoops. Sorry.

Thanks for the fast response.

[shameless hacker]

Okay...feeling like I'm missing something now.

I replaced contents of my "jquery.qtip-1.0.0-rc3.min.js" with the contents of "jquery.qtip-1.0.0-rc3-dm-min.js".

Now, there are NO qtips appearing in IE. Continues to work fine in FF.

Most humbly clueless,

Shameless

[Craig]

shameless, any errors?

[shameless hacker]

No, no errors.

I have had this alert at the bottom of my script all day because I was troubleshooting a problems with dataTables.

alert('made it here');


}); //(document).ready(function()


...and that alert--which is literally the last line of "(document).ready(function()"--fires off fine.

[shameless hacker]

oooohhhhh...it occurs to me that you were looking for something more sophisticated, like Firebug? I don't know how to use that, but if you have something that I need to do to assist, if you would offer some direction, then I would be happy to try and follow directions.

[Craig]

shameless, try out my custom branch instead:

http://github.com/craga89/qtip

[mofle]

Sorry for just bouncing in here, but I have the exact same problem as Shameless. I'm using jQuery 1.4. qTip works in IE, but I'm missing the pointy thing. When I try to use both the dustmoo and craga89 version, I get this script error:
Message: 'null' is null or not an object
Line: 1371
Char: 3
Code: 0

Can you help me?

[Voxen]

mofle Wrote:Sorry for just bouncing in here, but I have the exact same problem as Shameless. I'm using jQuery 1.4. qTip works in IE, but I'm missing the pointy thing. When I try to use both the dustmoo and craga89 version, I get this script error:
Message: 'null' is null or not an object
Line: 1371
Char: 3
Code: 0

Can you help me?

I have exactly the same problem with the dustmoo version on IE8, using jQuery 1.4.1:
Message: 'null' is null or not an object
Line: 1371
Char: 3

[dustmoo]

Alright.. looks like I can't create a fork and not maintain it.. Let me grab the latest version of jQuery and work out the bug.. I will post some fixes soon.

Thanks!

Dustin

[dustmoo]

Alright. I have fixed the IE tip display issue on IE with jQuery 1.4.1.

This bug may have been causing unintended consequences in other browsers. (Mal-formed tip HTML)

I have pushed the changes to github and updated the minified version as well.

Anyway.. This should be officially fixed on the fork version, let me know if you have any more problems.

http://github.com/dustmoo/qtip

Cheers!

[shameless hacker]

Craig--awesome beyond belief!!

Will touch back with you after site is from behind pwd.

Regards,

Shameless

[Voxen]

Thanks Dustmoo, it works now.

The minified version still displays an error message though:
Message: 'null' is null or not an object

It works fine with the plain version of the script.

[mofle]

I also get the script error using the minified version with IE6-8, the normal version works.

Another problem with your fork:

There seems to be something wrong with the border in IE6-8. The problem isn't visible in Firefox.

Can you take a look at it?

[dustmoo]

Voxen Wrote:Thanks Dustmoo, it works now.

The minified version still displays an error message though:
Message: 'null' is null or not an object

It works fine with the plain version of the script.

Thanks for the heads up.. looks like there is a problem with the preload-plugin that I need to track down. I will post as soon as the minified version is fixed.

And mofle,

Would you mind posting your qtip code so I can duplicate the problem exactly?

Thanks everyone! And thanks craig for a awesome plugin.

Dustin

[mofle]

Sure, here it is:

JS Code

$('.tooltip').each(function(){
   $(this).qtip({
      content: $(this).text(),
      position: {
         corner: {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
         }
      },
      style: { 
         width: 250,
         padding: 5,
         textAlign: 'left',
         border: {
            width: 3,
            radius: 5
         },
         tip: 'leftMiddle',
         name: 'light',
         title: {
            'font-size': '8px'
         }
      },
      show: {
         effect: function(){
            this.show();
         }
      },
      hide: {
         effect: function(){
            this.hide();
         }
      }
   });
});

[dustmoo]

Alrighty.. Somewhere in the updates between craig and I some code went missing yikes!

Anyway, I have fixed the IE 8 bugs with the preload plugin and the tip not showing with jQuery 1.4.1..

mofle I did a test with my updated version that I just pushed to github and I wasn't getting that styling error, do you have any other CSS that you are loading? I tested the above code on IE8 and IE7.. and all was well.

Anyway.. Keep the bug posts coming!

Cheers!

Dustin

[Voxen]

Dustmoo both scripts are running fine now, thanks to you.

There is still a small glitch that was not existing before (I mean not existing with Craig's downloadable rc3 version): the tip's arrow is "eating" the owner object instead of touching it. For example if I use qTip over an icon, the arrow is a little bit over the icon instead of just touching it.

Its not a big deal though

[mexmax]

I am using the latest version of qtip but qtips are not showing in IE8. They show just fine in FF.
Here is the function I use for loading the qtips:

JS Code

function displayqTip(elem) {
            jQuery(elem).qtip({
            content: {
            text: jQuery(elem).attr('tltipcontent'),
            title: {
                    text: jQuery(elem).attr('title'),
                    button: 'Close'
                    }
                },
                position: {
                    corner: {
                        target: 'topRight', // Position the tooltip above the link
                        tooltip: 'bottomLeft'
                    },
                    adjust: {
                        screen: true // Keep the tooltip on-screen at all times
                    }
                },
           show: {
                    when: 'click',
                    ready: true
                },
                hide: 'unfocus',
                fixed: true,
                style: {
                tip: true,
                width: 240
            }
        }
           )
        }

[mofle]

Found out why i got the strange tooltip. It's because the site it's deployed on sets IE in quirksmode.

Dustmoo, and chance getting it fixed for quirksmode?

[dustmoo]

mofle Wrote:Found out why i got the strange tooltip. It's because the site it's deployed on sets IE in quirksmode.

Dustmoo, and chance getting it fixed for quirksmode?

I'll take a look at it later today, I need to do some reading up on quirksmode, as I really don't know anything about IE's different "modes" and what they support. Does your site require quirksmode? You can specify which mode IE8 loads in with header tag. i.e.

JS Code

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

As documented here:

http://expression.microsoft.com/en-us/dd835379.aspx

[mofle]

Yes, but unfortunately it's deployed on an intranet, with only IE6 in quirksmode, and no way to change it.
Really hope you find a solution to this.

[dustmoo]

Well, I guess I'll have to look into that. It looks like we need to adjust the IE 6 hacks.. I'll look at it this afternoon.

Cheers!

Dustin

[Craig]

mofle, unfortunately there isn't a known fix for this in IE quirks mode! The problem is, when it's in quirks mode IE reports false heights and widths for certain elements, as it doesn't obey the standard box model for elements. This is why you're getting some dodgy border problems.