jQuery mapster and tooltip

I have the following jQuery script that displays a tooltip over a map area on hover.  I would like to display different classes depending upon the area that is hovered.

How do I change the class here in the jQuey;
<script>
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma = 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
            fill: true,
            fillColor: 'ffffff',
            fillColorMask: 'FFFFFF',
            fillOpacity: 0,
            strokeOpacity: 1,
            strokeWidth: 1,
            isSelectable: false,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            toolTipContainer: '<div class="map-bubble map-bubble-font"> </div>', 
            showToolTip: true,
            toolTipClose: ["area-mouseout"],
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}
        	
        	]
        })
});
</script>

</script>

Open in new window

LVL 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
Try adding ans onMouseOver option.  The documentation states:
This callback allows you to dynamically provide a boundList based on summary data from the imagemap itself, rather than providing the list up front. The event passes an array of AreaData objects, of the following structure:

    {
       key: 'key',       // primary mapKey for this area or area group
       value: 'value',   // mapValue for this area or group
       options = {}      // area-specific options defined for this group.
       areas = []        // array of areas that make up this group
    }
    http://www.outsharked.com/imagemapster/default.aspx?docs.html#onmouseout
So try something similar to the code below.  You'll need to "inspect" obj to see what key, value, options, and/or areas you want to respond to:
<script>
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma = 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
            fill: true,
            fillColor: 'ffffff',
            fillColorMask: 'FFFFFF',
            fillOpacity: 0,
            strokeOpacity: 1,
            strokeWidth: 1,
            isSelectable: false,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            toolTipContainer: '<div class="map-bubble map-bubble-font"> </div>', 
            showToolTip: true,
            toolTipClose: ["area-mouseout"],
            onMouseOver:function( obj ){
                   if( obj.value == 'somevalue' )
                   {
                     $(this).addClass("name of class");
                   }
             },
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}
        	
        	]
        })
});
</script>

</script>

Open in new window

rgranlundAuthor Commented:
Do you think this will work if I want to add a class to the tooltip container?
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma = 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
            fill: true,
            fillColor: 'ffffff',
            fillColorMask: 'FFFFFF',
            fillOpacity: 0,
            strokeOpacity: 1,
            strokeWidth: 1,
            isSelectable: false,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            toolTipContainer: '<div class="map-bubble //  ADD CLASS HERE //"> </div>', 
            showToolTip: true,
            toolTipClose: ["area-mouseout"],
            onMouseOver:function( obj ){
                   if( obj.value == 'oklahoma' )
                   {
                     $(this).addClass("oklahoma_class");
                   }
             },
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}
        	
        	]
        })
});
</script>

Open in new window

hieloCommented:
You mean instead of $(this).addClass("oklahoma_class");?

You could try targetting :
$('.map-bubble').addClass("oklahoma_class");

but, at the time $('.map-bubble').addClass("oklahoma_class");, the element with <div class='map-bubble'/> needs to exist already.  If you post a demo page somewhere I'll be able to assess your problem.

Regards,
Hielo
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Get the Guide
rgranlundAuthor Commented:
The class is already included in the script when it creates the tooltip container.
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma= 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
            fill: true,
            fillColor: 'ffffff',
            fillColorMask: 'FFFFFF',
            fillOpacity: 0,
            strokeOpacity: 1,
            strokeWidth: 1,
            isSelectable: false,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            showToolTip: true,
            toolTipContainer: '<div class="map-bubble"> </div>', 
            toolTipClose: ["area-mouseout"],
             onMouseOver:function( obj ){
                   if( obj.value == 'oklahoma' )
                   {
                     $('.map-bubble').addClass("oklahoma");
                   }
             },
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}]
        })
        
});
</script>

Open in new window

Here is the link: http://www.energyreco.com/mapping/
I want to be able to create a class for each tooltip so the bubble appears in different places on the page.
hieloCommented:
That page contains errors.  Execution of javascript halts upon errors, so you won't be able to troubleshoot your problems until you have fixed all the run-time errors first.  Open Firefox, install the "Web Developer" toolbar.  Load your page, then to the far right-side of the toolbar you will see some red icons.  Click the right-most one and a window will pop up telling which file and line contains the errors.  Fix those errors, then post back if you still need assistance.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rgranlundAuthor Commented:
The errors are fixed. Here is the link: http://www.energyreco.com/mapping/
I want to be able to create a class for each tooltip so the bubble appears in different places on the page. 
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma= 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
            fill: true,
            fillColor: 'ffffff',
            fillColorMask: 'FFFFFF',
            fillOpacity: 0,
            strokeOpacity: 1,
            strokeWidth: 1,
            isSelectable: false,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            showToolTip: true,
            toolTipContainer: '<div class="map-bubble"> </div>', 
            toolTipClose: ["area-mouseout"],
             onMouseOver:function( obj ){
                   if( obj.value == 'oklahoma' )
                   {
                     $('.map-bubble').addClass("oklahoma");
                   }
             },
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}]
        })
        
});
</script>

Open in new window

I want to add a class to:    toolTipContainer: '<div class="map-bubble"> </div>',
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.