IE 8 = High CPU Utilization

[acorcoran]

We are experiencing some very high CPU utilization in the updatePosition function (for IE 8 ONLY). I figured it had to do with the position tag we were utilizing:

JS Code

adjust: {
    screen: true // Keep the tooltip on-screen at all times
},

However, even when I remove this completely (the position), anytime we have a tooltip that scrolls off of the screen (IE 8 again), our CPU utilization spikes. Running the IE profiler, I see that the offset under updatePosition is taking most of the brunt...spiking the CPU up to 35%, with IEExplorer being the culprit etc. The spike actually happens when we mouse off of the tool tip.

No problems at all in Firefox. We are utilizing the latest trunk.

[Craig]

acorcoran,

Could you try disabling the fade effect and see if it makes a difference? I have a feeling this is to do with IE's poor filter/VML support.

[acorcoran]

I have set to false, however, I can try to remove the delay as well.

JS Code

// tooltip overlay
TNBCardStation.Tooltips = function(){
    return {
        setup : function(){
            $('td[abbr]').each(function() {
                $(this).qtip({
                    content: {
                        text : $(this).attr('abbr'),
                        url : false
                    },
                    position: {
 
                        corner: {
                            target: 'rightMiddle',
                            tooltip: 'topLeft'
                        }
                    },
                    style: {
                        tip: true,
                        border: { 
                            color: '#A20C1D'   
                        },
                        'background-color' : '#F9F9F9'
                    },
                    show : {
                        delay: '100',
                        effect : false
                    }
                })
            });
        },
 
        destroy : function(){
             $('td[abbr]').qtip("destroy");
        }
    };
}();

I added the following lines, thinking that turning off the hide fade would do it:

JS Code

show : {
  delay: '100',
  effect : false
},
hide : {
  delay: '0',
  effect : false
}

But still get the big spikes on mouse out.

[Craig]

Are you seeing any performance gains with this? Or the same CPU spike?

[acorcoran]

Same spike.

[Craig]

acorcoran,

Looking into this now, but not getting anywhere at the moment. is it just happening in IE8 or previous IE versions also?

[acorcoran]

I haven't checked previous versions, as right now I only have IE 8 installed. I'll get back to you on this one. Not experiencing this in FF which is a good thing. But it is definitely noticeable spike (not a small 1-2% hop). I'm surprised you aren't able to see this, but again, I've only tested it on 2-3 IE 8 machines so maybe I'm missing something =)

Edit: Tried this in IE 7 this morning, same result...0-1% CPU utilization when i hover over the tooltip, however, once I move the focus from the tooltip and it leaves, jumps to 20-25% and stays there unless you refresh, etc.

[acorcoran]

Has anyone else been able to reproduce this? I'll be more than happy to put up a public page if need be.

[Craig]

acorcoran,

I'm looking into it atm but a bit swamped with my work load to test it thoroughly. I'll definitely get onto this as soon as I have time, but for now could you register a bug at the tracker? https://bugs.edge.launchpad.net/qtip

[acorcoran]

Absolutely.

[Craig]

acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

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

[acorcoran]

Absolutely. We will run it through our wringer today.

[acorcoran]

Right off the bat it destroyed (i.e, hung) FF (when trying multiple tooltips and IE =( I.e, wouldn't show the tooltip and until i force ended the process, it just hung. Noticed that you are renaming this to self, which is the default reference to the window.

Let me make a sample page to take out all of our other app code.

craig Wrote:acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

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

[acorcoran]

Ok, I made a barebones page from the new trunk and now experiencing issues with FF:

JS Code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
   <title>QTip Debugging</title>
   <meta http-equiv="content-type" 
      content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="jquery.qtip.js"></script>
 
     <script type="text/javascript">  
      // tooltip overlay
      $(document).ready( function() {
        $('td').each(function() {
           $(this).qtip({
             content: {
               text : $(this).attr('abbr')
            }
          })
        }); 
      });
      </script>
 
 
</head>
 
<body>
   <table border="1">
      <tr>
          <td abbr="Principal cardholder name.">Primary Name</td>
          </td>
      </tr>
      <tr>
          <td abbr="Address line 1 of cardholder mailing address. If this account will be for business purposes, the company should be entered in this field so that company name will print on all mailed items." >
              Address 1
          </td>
 
      </tr>
      <tr>
          <td abbr="City name if the cardholder has a non-US address. Mailing address if a company name is listed in Line 1.">Address 2</td>
 
      </tr>
      <tr>
          <td abbr="City of cardholder mailing address.<br>Country name if the cardholder has a non-US address.">City</td>
 
      </tr>
      <tr>
          <td abbr="State abbreviation<br>GB for United Kingdom<br>GU for Guam<br>PI for Pacific Island Trust<br>PR for Puerto Rico<br>VI for Virgin Islands<br>FC for non-US addresses'">State</td>
 
      </tr>
      <tr>
          <td abbr="ZIP code of cardholder mailing address.">Zip</td>
 
      </tr>
      <tr>
          <td abbr="Secondary cardholder name.">Secondary Name</td>
 
      </tr>
      <tr>
          <td abbr="Primary cardholder maiden mother name (or other code word known only to the cardholder). Only displays first 8 characters and is the most secure form of identification over the telephone.">
              Maiden Name
          </td>
 
      </tr>
      <tr>
          <td abbr="Demand deposit(checking) account number; cardholder sharedraft account number.<br>This field is required for debit card accounts. The account listed is the destination for all transactions made on the card. This account must be at the credit union for debit cards.">DDA</td>
 
      </tr>
      <tr>
          <td abbr="Savings Account Number/Member Number. Form of identification used by TNB to verify cardholder identity.">Savings No</td>
 
      </tr>
  </table>
 
</body>
</html>

craig Wrote:acorcoran,

I've just today overhauled the entire corner and positioning management functionality of the library. Could you update to the latest branch revision and see if this is having any effect on the CPU spike?

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

[Craig]

acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.

[acorcoran]

Looks like this might have resolved it. It worked in my sandbox. Will let you know once implement it into our branch.

craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.

[acorcoran]

Alright, so far so good, however, I either made a typo somewhere or my position isn't working properly. I believe this used to dynamically position the tooltip if it is rendered off the screen...am I missing something easy? =)

JS Code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
   <title>QTip Debugging</title>
   <meta http-equiv="content-type" 
      content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="jquery.qtip.js"></script>
 
         <script type="text/javascript">  
            // tooltip overlay
            $(document).ready( function() {
               $('td').each(function() {
                  $(this).qtip({
                     content: {
                        text : $(this).attr('abbr')
                     },
                show : {
                 delay: '100',
                effect : false
                },
                hide : {
                 delay: '0',
                effect : false
                },
                position: {
                 adjust: {
                     screen: true // Keep the tooltip on-screen at all times
                 },        
                 corner: {
                   target: 'rightMiddle',
                  tooltip: 'topLeft'
                 }
                }
                  })
               }); 
            });
         </script>
 
 
</head>
 
<body>
   <table border="1" width="100%">
      <tr>
          <td abbr="Principal cardholder name.">Primary Name</td>
          </td>
      </tr>
      <tr>
          <td abbr="Address line 1 of cardholder mailing address. If this account will be for business purposes, the company should be entered in this field so that company name will print on all mailed items." >
              Address 1
          </td>
 
      </tr>
      <tr>
          <td abbr="City name if the cardholder has a non-US address. Mailing address if a company name is listed in Line 1.">Address 2</td>
 
      </tr>
      <tr>
          <td abbr="City of cardholder mailing address.<br>Country name if the cardholder has a non-US address.">City</td>
 
      </tr>
      <tr>
          <td abbr="State abbreviation<br>GB for United Kingdom<br>GU for Guam<br>PI for Pacific Island Trust<br>PR for Puerto Rico<br>VI for Virgin Islands<br>FC for non-US addresses'">State</td>
 
      </tr>
      <tr>
          <td abbr="ZIP code of cardholder mailing address.">Zip</td>
 
      </tr>
      <tr>
          <td abbr="Secondary cardholder name.">Secondary Name</td>
 
      </tr>
      <tr>
          <td abbr="Primary cardholder maiden mother name (or other code word known only to the cardholder). Only displays first 8 characters and is the most secure form of identification over the telephone.">
              Maiden Name
          </td>
 
      </tr>
      <tr>
          <td abbr="Demand deposit(checking) account number; cardholder sharedraft account number.<br>This field is required for debit card accounts. The account listed is the destination for all transactions made on the card. This account must be at the credit union for debit cards.">DDA</td>
 
      </tr>
      <tr>
          <td abbr="Savings Account Number/Member Number. Form of identification used by TNB to verify cardholder identity.">Savings No</td>
 
      </tr>
  </table>
 
</body>
</html>

craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.

[acorcoran]

Looks like something else is missing as well now:

JS Code

tip: true,

when combined with the following:

JS Code

adjust: {
                     screen: true // Keep the tooltip on-screen at all times
                 },

Works in FF (as in not crashing and showing the tip, but not dynamically positioning it as stated in the previous post), but in IE 8 I get the following:

'0' is null or not an object
Line: 1472
Char: 10

Looks like it only barfs when it is in combo with the position adjust =/. I must be your worst tester...sorry.

craig Wrote:acorcoran,

Sorry about that, a regression was caused by me altering the updateContent method slightly. Upgrade to revision 98 and it should be fixed.