Question

I’m using the jQuery qTip to show individual users and their votes when an average rating is mousedover.

qTip calls a PHP file which grabs all the users and votes for the item from the MySQL database and builds a 3 column table, which appears as the tooltip.

In Firefox, the tooltip displays properly.

In IE7 (haven’t tested on IE8 yet), the tooltip is the proper height, but the width is only 2 or 3 characters – not the entire table.

If I set the width of the div to a fixed number, say width: 300px; I can coax IE into displaying it properly.

However, the length of my users’ names varies considerably, and I’d rather not nail down the div to its maximum possible width and then have a crapload of whitespace when you look at an item voted on only by “Joe”.

Using width: auto; has no effect in IE7.

Are there alternatives?

Sorry if I’ve overlooked a similar question. I searched for a bit before posting but didn’t find anything suitable.

EDIT TO ADD CODE:

<div
  style="-moz-border-radius: 0pt 0pt 0pt 0pt;
         position: absolute; 
         width: 358px; 
         display: none; 
         top: 384.617px; 
         left: 463.5px; 
         z-index: 6000;" 
  class="qtip qtip-defaults" qtip="0">

  <div style="position: relative; 
              overflow: hidden; 
              text-align: left;" 
       class="qtip-wrapper">

    <div style="overflow: hidden; 
                background: none repeat scroll 0% 0% white; 
                border: 1px solid rgb(211, 211, 211);" 
         class="qtip-contentWrapper">

      <div class="qtip-content qtip-content" 
           style="background: none repeat scroll 0% 0% white; 
                  color: rgb(17, 17, 17); 
                  overflow: hidden; 
                  text-align: left; 
                  padding: 5px 9px;">

        <div id="WhoResults">
          <table>
            <tbody>
              <tr>
                <td>guy1</td>
                <td>guy2</td>
                <td>guy3</td>
              </tr>
              <tr>
                <td>guy4</td>
                <td>guy5</td>
                <td>guy6</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>

I have applied no CSS styling. That’s all been handled by qTip. I tried to format it as best I could. Thanks for any help you can provide.

Answer 1

It turned out to be a bug in the way qTip was calculating the proper tooltip width for IE. I overrode that line in the qTip code and posted a note to the developer’s forum.