qTip 1 and Image Map problems with IE7 - need help converting to 2.0

[tafs7]

Ok, so I spent some time and got qTip 1.0 to work on IE8+, FF, Chrome, Safari. However it doesn't work on IE7 for me. I am trying to have tooltips on an HTML Image Map. You can see the page at http://www.truthaboutsurfacemining.com/SurfaceMining101 (scroll to bottom and click the Coal Tree image). The image map is in a separate HTML page that I display in a IFrame using the Fancybox plugin to get the lightbox-style modal dialog effect.

After reading thru some threads here, I see that you are no longer supporting qTip 1.0, so I need help migrating my code base to 2.0 if this problem cannot be fixed using v1. I tried using the Converter on this site, but it seems to be broken as I paste in my code and it doesn't reflect changes on the right side.

Here's the gist of what I do:
I have to instantiate 4 separate qTips because I use my own tooltip image backgrounds with the tip already in them. I have a JSON array containing each image map area element's data such as the coords, and the position of the tip, and I append the <area> elements to the image map with jQuery in a loop through this array. I tag the <area> element with a class that indicates the position of the tip for each object in the array. This allows me to use a specific jQuery selector for each tip position configuration (topRight, topLeft, bottomRight, bottomLeft).

I also have a hidden div that contains the markup for the tooltip content, and in the qTip's beforeShow, I select the div, and change up the IMG and SPAN for the specific tooltip being displayed, so I can reuse the event and my content div markup for all tooltips.

I need to make this work in IE7, so if that means migrating to qTip2, then I need some help in converting this code base. Can someone assist? See code below.

Thanks in advance!

--
Thiago Silva

JS Code

SMTree.beforeShowHandler = function (self) {
	var item = self.elements.target,
		tooltipElem = self.elements.tooltip,
		imgUrl='', descriptionText='', curItem, i;
	for(i=0; i < SMTree.items.length; i++){
		curItem = SMTree.items[i];
		if(curItem['name'] === item.data('name')){
			imgUrl = 'url("' + curItem['imageUrl'] + '")';
			descriptionText = curItem['description'];
			break;
		}
	}
	$('.coaltree_tooltip_content > span', tooltipElem).text(descriptionText);
	$('.coaltree_tooltip_content div.tooltip-image', tooltipElem).css('background-image', imgUrl);
};
 
SMTree.getItemHtml = function (item) {
	return '<area class="' + item['tipPosition'] + '" href="j<strong></strong>void(0);" shape="rect" coords="' + item['coords'] + '" alt="' + item['alt'] + '" />';
};
 
$(document).ready(function () {
 
	//load image map from JSON
	for (var i = 0; i < SMTree.items.length; i++) {
		var item = SMTree.items[i],
			node = $(SMTree.getItemHtml(item));
		node.data('name', item['name']);
		$('#treeLabels').append(node);
	}
 
 
	$.fn.qtip.defaults.api.beforeShow = function () {
		SMTree.beforeShowHandler(this);
		return true;
	};
 
	$.fn.qtip.styles.coalTreeTopLeft = {
		width: 376,
		height: 160,
		padding: 15,
		paddingTop: 30,
		background: 'transparent url(images/coaltree_tooltip_tl.png) no-repeat',
		border: { width: 0 }
	};
 
	$.fn.qtip.styles.coalTreeTopRight = {
		background: 'transparent url(images/coaltree_tooltip_tr.png) no-repeat',
		name: 'coalTreeTopLeft'
	};
 
	$.fn.qtip.styles.coalTreeBottomLeft = {
		background: 'transparent url(images/coaltree_tooltip_bl.png) no-repeat',
		paddingTop: 15,
		name: 'coalTreeTopLeft'
	};
 
	$.fn.qtip.styles.coalTreeBottomRight = {
		background: 'transparent url(images/coaltree_tooltip_br.png) no-repeat',
		paddingTop: 15,
		name: 'coalTreeTopLeft'
	};
 
	// configure defaults for qTip plugin
	(function (d) {
		d.content.text = $('.coaltree_tooltip_content');
		d.show.when.event = 'click';
		d.hide.when.event = 'mouseout';
		d.hide.fixed = true;
		d.hide.delay = 250;
		d.position.target = false;
		d.position.adjust.mouse = false;
		d.position.adjust.screen = true;
	})($.fn.qtip.defaults);
 
 
	$('#treeLabels area.topLeft').qtip({
		style: 'coalTreeTopLeft',
		position: {
			corner: { target: 'bottomMiddle' },
			adjust: { x: -50, y: 10 }
		}
	});
 
	$('#treeLabels area.topRight').qtip({
		style: 'coalTreeTopRight',
		position: {
			corner: { target: 'bottomMiddle' },
			adjust: { x: 120, y: 10 }
		}
	});
 
	$('#treeLabels area.bottomLeft').qtip({
		style: 'coalTreeBottomLeft',
		position: {
			corner: { target: 'topMiddle' },
			adjust: { x: -50, y: -175 }
		}
	});
 
	$('#treeLabels area.bottomRight').qtip({
		style: 'coalTreeBottomRight',
		position: {
			corner: { target: 'topMiddle' },
			adjust: { x: 120, y: -170 }
		}
	});
});

[tafs7]

ok...so it's been a few days, over 40 views, and no replies. Can anyone assist with fixing this bug, and/or converting to 2.0???

I would greatly appreciate it.

--Thiago

[kiddailey]

Probably because it's a pretty tall order to work out all the details of what you need Here's a hastily written, rough and partial example of what you'll probably need to do:

http://jsfiddle.net/kiddailey/2dMbv/

In a nutshell, here's what I did:

• Updated the property names as needed
• Moved the styles to CSS
• Used $.extend() to merge defaults for each tip rather than messing with plugin directly
• Used the title attribute on each AREA element to store your tip contents. Alternatively, you could move your beforeShow event stuff into the render event as I indicated in the comments.

Hope that helps.

HTML

JS Code

<div id="treeLabels">
    <img src="http://www.truthaboutsurfacemining.com/SurfaceMining101/SiteAssets/Coaltree/images/coaltree_labels.png" 
usemap="#map"width="200" height="200"/>
 
    <map name="map">
        <area class="topLeft" shape="rect" coords="0,0,50,50" href="#" alt="Top Left" 
title="Tooltip content for this area goes here" />
    </map>
</div>

CSS

JS Code

.coalTreeTopLeft .ui-tooltip-content {
    width: 376px;
    height: 160px;
    padding: 30px 15px 15px 15px;
    background: transparent url(images/coaltree_tooltip_tl.png) no-repeat;
    background-color: #ccc;
    border: 0px;
   }

JAVASCRIPT

JS Code

$(document).ready(function()
{
    // Define our common tip defaults
    var tipDefaults = {
        show: {
            event: 'click'
        },
        hide: {
            event: 'mouseout',
            fixed: true,
            delay: 250
        },
        position: {
            target: false,
            viewport: $(window),
            adjust: {
                mouse: false
            }
        },
        style: {
            tip: {
                border: 0
            }
        },
        events: {
            render: function(event, api) {
                //beforeShow stuff goes here
            }
        }
    };
 
    // Use the jQuery $.extend() method to merge our
    // tip defaults with the ones specific to this item
    $('#treeLabels area.topLeft').qtip(
        $.extend(tipDefaults, {
            style: {
                classes: 'coalTreeTopLeft'
            },
            position: {
                my: 'top center',
                at: 'bottom center',
                adjust: { 
                    x: -50, 
                    y: 10 
                }
            }
        })
    ).click(function(event) { event.preventDefault() } ); // prevent the browser from 
// going to the href on the area since we're triggering the tip on the click event
 
});