Hello!

I am having a little difficulty customizing my BeautyTips.

I am using the jQuery Map Hilight module (http://drupal.org/project/jq_maphilight) to display information on branch locations for my client's company. I am trying to use BeautyTips to display the info so that when a user clicks on a location, an information bubble appears. The BeautyTip is treating the entire map image as the target element, though, instead of the Hilight area. The result is that hovering over (I haven't been able to figure out setting 'click' as the trigger yet) the branch location makes the BeautyTip appear rather far away, on the outer right edge of the entire image.

The attached image explains my predicament much more clearly!

I guess I am just a little fuzzy on where to place code that could customize my BeautyTips. Right now, I just have the following PHP code in the actual node that needs the Tips:

<?php
   $options['bt_locations_page'] = array(
      'cssSelect' => '.location',
      'ajaxPath' => array("$(this).attr('href')"),
      'trigger' => array('mouseover', 'click'),
      'width' => 350,
    );
    beautytips_add_beautytips($options);
?>

This makes the Tip appear for maps areas with a class "location" just fine. Now, I just need to figure out how to customize the Tips' locations, colors, etc.

Thanks for any direction on this!

CommentFileSizeAuthor
#1 Screen shot 2010-12-06 at 6.52.52 PM.png905.82 KBdesierto
beauty-tips-image.png297.12 KBTJEngel

Comments

desierto’s picture

desierto commented
StatusFileSize
new Screen shot 2010-12-06 at 6.52.52 PM.png905.82 KB

I am having a similar issue (see attached image) where the beauty tip appears far from the element (which in this case is an <area> tag on a image map).

If I do not use beauty tips the title tag does appear in the correct place, but not the beauty tip when I include the "class="beautytips".

Does anyone know if there is a way to have them appear in the correct location on the image map?

My code looks like this:

<img class="{strokeColor:'ff0000',strokeWidth: 1}" src="sites/default/files/images/imap.jpg" usemap="#imap" border="0" />
<map name="imap">
<area shape="rect" coords="318,426,385,455" class="beautytips" href="#" alt="Rincons" title="Rincons Mountains, 8482ft, 2,585m" />
pifagor’s picture

pifagor commented
Issue summary: View changes
Status: Active » Closed (outdated)