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

jQueryJavaScript

Last Comment

Robert Granlund

8/22/2022 - Mon

hielo

7/24/2015

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

Robert Granlund

7/24/2015

ASKER

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

hielo

7/24/2015

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Robert Granlund

7/24/2015

ASKER

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.

ASKER CERTIFIED SOLUTION

hielo

7/24/2015

Become an EE member today7-DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

Not exactly the question you had in mind?

Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.

ask a question

Robert Granlund

7/27/2015

ASKER

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>',