[Solved] qTip width problem in IE browers

[jaffester]

Hello and thanks for nice plugin.
But im having some issues and searched the forum and some users had same kind of issues, but couldn find any proper answer.

Im using the lates 1.0.0-rc3 version with ajax content.
All browsers but IE displays the dynamic content right.

My biggest problem is this: IE browsers shows only half of the content, so the width of the tip is not expanding right.

What is the problem? I have no idea.

If you suggest to use some api methods, I would be glad, if you show how to apply the api and use the methods.

Anyway. I have double checked the code and no problems with ff, safari, chrome, opera.
IE6,7 and 8 shows only half tip.

Another problem is that when hovering the target, tip starts to show, but it start a little bit blow the position and slides to right position. Weird? This is not happening when the prerender option is set to true.

Thanks.

[Craig]

jaffester, sorry to hear you're having problems with IE as many users have. The width issue is somewhat difficult to fix, as some users reported it fixed by various different means and others not.

You could try adding in an updateWidth() call into the onContentUpdate() and onContentLoad() callbacks.

[jaffester]

is this how you apply that method:

$('.selector').qtip({
onContentUpdate: function() { this.updateWidth(); },
onContentLoad: function() { this.updateWidth(); }
});

[Craig]

That's correct jaff, having any luck with it so far?

[jaffester]

JS Code

$('.selector').qtip({
  api: {
    onContentUpdate: function() { this.updateWidth(); },
    onContentLoad:  function() { this.updateWidth(); },
    beforeContentLoad: function() { this.updateWidth(); }
    }
  });

I tried this solution, now ie shows 20px more, but not all.

I wonder what could be the solution to insert the width manually after the qtip is rendered.

Pseudo code could be like this:

JS Code

elem.qtip {
    render qtip elements;
    CALLBACK which calculates and inserts the width to hidden qtip elements after each element has its content loaded
  }
 
function CALLBACK () {
    loop through each qtip and get the inner width;
    insert css to qtip elements;
}

Any ideas?

[JazzyJeff]

Any solutions to this issue? I am getting the same error.

[Craig]

JazzyJeff, give dustmoos revisions a whirl which (I think) fix this issue:

http://github.com/dustmoo/qtip

[ahsteele]

I am having the same issue as JazzyJeff & Jaffester. When using qTip in IE w/ non dynamically loaded content it works fine. However, when loading content via an Ajax call the qTip content does not resize once content is loaded. I have tried adding an updateWidth on the various callbacks without any luck. In fact, when utilizing updateWidth I get a small white box at the top left corner of the qTip content.

I am using jquery.qtip-1.0.0-rc3.min and jquery-1.3.2. I did try dustmoos latest revision and it had the same issue.

JS Code

$(document).ready(function() {
            $('ul.person_info li:first-child').each(function() {
                $(this).qtip({
                    show: 'mouseover',
                    hide: 'mouseout',
                    style: {
                        name: 'cream'
                    },
                    content: {
                        url: '<%= Url.Action("FindPerson", "People") %>',
                        data: { id: $(this).attr('id') },
                        method: 'get'
                    }
                });
            });
 
            $('ul.person_info li:first-child').qtip({
                api: {
                    onContentUpdate: function() { this.updateWidth(); },
                    onContentLoad: function() { this.updateWidth(); },
                    beforeContentLoad: function() { this.updateWidth(); }
                }
            });
        });

[Craig]

I'm working with dustmoo on the issue to push out a fix to his RC3 branch for this, bare with us guys and check this thread for updates!

[ahsteele]

craig Wrote:I'm working with dustmoo on the issue to push out a fix to his RC3 branch for this, bare with us guys and check this thread for updates!

I watched this space over the weekend .... no updates

Is there anything I can do to help? I wanted to roll this ToolTip via qTip in w/ this iteration which freezes on Wednesday.

[dustmoo]

ahsteele Wrote:

craig Wrote:I'm working with dustmoo on the issue to push out a fix to his RC3 branch for this, bare with us guys and check this thread for updates!

I watched this space over the weekend .... no updates

Is there anything I can do to help? I wanted to roll this ToolTip via qTip in w/ this iteration which freezes on Wednesday.

Thats because Craig has to hunt me half-way around the world . Craig came up with some patches that should fix the IE 8 width issues. I have merged them with my fork here:

This fork has been accumulating quite a few fixes and is running well for lots of people.. if it still doesn't work let us know.

Here it is:

http://github.com/dustmoo/qtip

[ahsteele]

dustmoo Wrote:This fork has been accumulating quite a few fixes and is running well for lots of people.. if it still doesn't work let us know.

Here it is:

http://github.com/dustmoo/qtip

Unfortunately the issue still exists in: http://github.com/dustmoo/qtip/raw/maste...rc3-dm.js. The content loads but the qTip does not resize.

[Craig]

ahsteele, could you re-pull from dustmoos branch please? It should be fixed now in all IE.

[dustmoo]

As of now it is fixed.. I wasn't able to get the changes merged until today.

Cheers!

[frillyme]

hi dustmoo,

Got your stuff to fix the opacity issue and it seems to work but completely kills the tooltips in IE, as in they don't appear at all. Would you have any ideas about that?

Cheers

[dustmoo]

Hi Frilly,

qtips are working fine in IE7 and IE8 for me.. mind posting your code so I can see if I can duplicate the problem?

Thanks!

Dustin

[frillyme]

It's probably something I'm doing wrong as I'm a noob!!

JS Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta name="title" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
   <title>Bill Explainer</title>
 
   <meta name="keywords" content="keywords here" />
   <meta name="description" content="description here" />
   <meta name="robots" content="index,follow" />
 
   <link rel="stylesheet" type="text/css" href="css/styles_default.css" />
   <link rel="stylesheet" type="text/css" href="css/core.css" />
 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <!--<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>-->
   <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3-dm.js"></script>
   <script type="text/javascript" src="js/jquery.actions.js"></script>
 
   <!--[if IE 6]>
       <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
       <script type="text/javascript">
         // IE6 Background Hover Flicker Fix
            try { 
               document.execCommand('BackgroundImageCache',false,true);
            }catch(ignoreme){ 
          } 
       </script>
     <![endif]-->
     <!--[if IE 7]>
       <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
     <![endif]-->
 
</head>
 
<body class="centerAlign">
    <div id="pageWrap">
 
      <div class="header contain">
         <h1>Understanding your first bill</h1>
         <p>Move your mouse over the icons, and we'll explain what this part of your bill means.</p>
         <ul class="contain">
            <li class="floatRight"><a href="bill_explainer_page2.html" class="btn"><span>Next ></span></a></li>   
         </ul>
      </div>
 
      <div class="mainContent contain">
         <img id="_billPg1" src="img/billPg1.gif" usemap="#billPg1" border="0" width="886" height="860" alt="" />
         <map id="billPg1" name="billPg1">
            <area shape="rect" coords="324,73,477,123" href="#" alt="This tells you which region you live in. You'll only need this to register for eBilling." title="This tells you which region you live in. You'll only need this to register for eBilling." class="tip"   />
            <area shape="rect" coords="495,74,648,124" href="#" alt="This is your unique account number. You'll need it if you contact us about your account." title="This is your unique account number. You'll need it if you contact us about your account."    />
            <area shape="rect" coords="660,75,773,125" href="#" alt="This is the date your bill was generated." title="This is the date your bill was generated."    />
            <area shape="rect" coords="497,340,722,368" href="#" alt="This is the total balance (if any) brought forward from any advance payments you've made (-ve numbers), or unpaid charges you owe (+ve numbers)." title="This is the total balance (if any) brought forward from any advance payments you've made (-ve numbers), or unpaid charges you owe (+ve numbers)."    />
 
         </map>
 
        </div>
 
   </div><!-- }}} pageWrap -->
</body>
</html>

Here is my js

JS Code

$(document).ready(function() {
   $('area[title]').each(function() { 
      $(this).qtip( {
         content: $(this).attr('title'),
         position: {corner: {target: 'bottomMiddle',   tooltip: 'topMiddle'},
         adjust: {screen: true }},
            show: { solo: true, delay:0  },
            hide: {fixed: true },
            style: {tip: true,
               border: {width: 2, radius: 3},
               name: 'light',
               width: 300 
            }})// Remove attributes
               .removeAttr('title');
         });
      });

Many thanks!!

[dustmoo]

No worries Frilly! We are happy to help!

Try removing your extra bracket here:

JS Code

adjust: {screen: true }},

to this

JS Code

adjust: {screen: true },

See if that fixes it for you..

Also, I highly recommend grabbing the firebug addon for Firefox, which can let you know if your javascript is having errors.

[frillyme]

Thanks Dustin, working in IE now but seems to have lost the tooltip styling (i.e. rounded corners and also arrows).

I'm getting a javascript error saying images are undefined. but if i include your preload script, then the tooltips don't work at all in all the browsers?

Frilly

[dustmoo]

frillyme Wrote:Thanks Dustin, working in IE now but seems to have lost the tooltip styling (i.e. rounded corners and also arrows).

I'm getting a javascript error saying images are undefined. but if i include your preload script, then the tooltips don't work at all in all the browsers?

Frilly

Hi Frilly, yes it should work on all browsers.. if you don't use the minified version of the script you NEED to include the preload plugin. Not doing so could break everything.

I am copying your code and doing some tests in IE.. Let me see what I can find.

Thanks!

Dustin

[dustmoo]

Frilly.. I cleaned up the qtip code:

This draws just fine with my latest fork version and IE 8:

JS Code

<script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
         $('area[title]').each(function() { 
            $(this).qtip({
               content: $(this).attr('title'),
               position: {corner: {target: 'bottomMiddle'}},
               adjust: {screen: true },
                  show: { solo: true, delay:0  },
                  hide: {fixed: true },
                  style: {tip: 'topMiddle',
                     border: {width: 2, radius: 3},
                     name: 'light',
                     width: 300}}).removeAttr('title');
               });
            });
   </script>

But then, I am not loading any of your other CSS files. So if your still having trouble, take a look at that. Cheers!

Dustin

[frillyme]

Many thanks for your help Dustin.

I have it working in all browsers, styled and all

Frilly