Rich HTML Balloon Tooltip and Chrome

[longhorn1999]

1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

3) Describe problem:

I've been using the tooltip for a while now successfully in FF and IE7/IE8, but I just discovered that it doesn't work properly in Chrome. The URL of the image links I've created become blocked unless the image is at the bottom of the browser. Here's a temporary link to the site:

http://www.urlgone.com/9667b9/

I'm using a pretty standard balloontip.css:

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana, Arial, sans-serif;
line-height: 18px;
z-index: 100;
background-color: white;
width: 350px;
/* adds shadow to box in firefox */
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
visibility: hidden;
}

I see now that Chrome is not listed as a browser supported initially by the tooltip. If this is the case, is there any easy way to disable it just for Chrome? Though of course I'd prefer to get it working if possible.

Thanks

[jscheuer1]

This script works fine in Chrome on the demo page. The problem is that Chrome isn't getting the height of the triggers. So the tips are appearing over the triggers, causing flicker due to the rapid mouseover mouseout action as perceived by Chrome.

At least that's what's happening here when I view the page in Chrome.

Chrome actually has this 'right'. The triggers are a tags, which are natively display inline. As such they have no intrinsic height. IE and Firefox are treating them as or at least like display block and thereby giving them the height of their content, in this case the images of the air purifiers.

Making them display block won't hurt IE or Firefox and will fix Chrome. But this is dependent upon their current layout (in elements, table cells in this case, where they wrap to the next line anyway). Should that change much, the tips will still work, but the page might not layout as desired.

To set this up, find the containing table for the triggers highlighted here and add the id attribute (red) as shown:


<!-- featured_products_eof //--></td>
</tr>
<!-- Begin Sitemap SEO-->
<script type='text/javascript' src='javascript/sitemap_seo.js'></script>

<!-- End Sitemap SEO -->
</table></td>
</tr>
</table></td>
<!-- body_text_eof //-->
<td width="171" valign="top"><table id="balloonlinks" border="0" width="171" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->

<tr>
<td><center>
<!-- http://www.LiveZilla.net Chat Button Link Code -->
<a href="javascript:void(window.open('https://www.air-purifier-nation.com/livezilla/livezilla.php','','widt

Add this to the balloontip.css file:


#balloonlinks a {
display: block;
}

You may have to refresh the page and/or clear the cache in Chrome to see the changes take effect. If this doesn't take care of it, let me know. It does work in a local mock up.

[longhorn1999]

Thanks for the detailed explanation and quick fix, John!

That seems to have done the trick.

Happy New Year!