How to show a tooltip?

[josetlaseca]

Is it possible to show a tooltip when the mouse pointer is over a state?

I want to show some infor when the user passes the pointer over a state, each state has a different tooltip content.

I am trying to use something like this plugin:
http://www.opentip.org/

my current code looks like this:

$('#map').usmap({

            'mouseover': function(event, data)
            {
                console.log('Mouse over: ' + data.name);
                //I need to show a tooltip here, this tooltip should be shown for the hovered state
            }
        });

[danielhonrade]

'mouseover': function(event, data) {
//console.log('Mouse over: ' + data.name);
var title = data.name;
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
$('#map-inside, #map-home').mousemove(function(e) {
var mousex = e.pageX - 10; //Get X coordinates
var mousey = e.pageY - 30; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
},
'mouseout': function(event, data) {
$('.tooltip').remove();
},

[pflantzdog27]

Very nice!

[baconjulie]

Can someone please help me I am trying to display a tooltip in my map and no matter how I try it seems to never work. I have the following code:

'mouseover': function(event, data) {
//console.log('Mouse over: ' + data.name);
var title = data.name;
$('

').text(title).appendTo('body').fadeIn('slow');
$('#map').mousemove(function(e) {
var mousex = e.pageX - 10; //Get X coordinates
var mousey = e.pageY - 30; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
},
'mouseout': function(event, data) {
$('.tooltip').remove();
},
enableToolTips: true

My map div id is "map" and it never goes into the $('#map').mousemove() function

[kjrhody]

Tried the above with no avail:

            mouseover: function(event, data) {
                var title = data.name;
                $('<p class ="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
                $('#map').mousemove(function(e){
                    var mousex = e.pageX - 10; // get x coords
                    var mousey = e.pageY - 30; // get y coords
                    $ ('.tooltip').css({top: mousey, left: mousex});
                });
            },
            mouseout: function(event, data){
                $('tooltip').remove();
            }

Am I missing something?

[kjrhody]

Just to report back, if anyone needs help. It's easier to create a div and then specify its actions. The following works for me and gives a pretty nice styled tooltip on mouseover:

<div id="tooltip"></div>
...
<script>
...
            // Show tooltip when hovering over state
            mouseover: function(event, data) {
                $('#tooltip').text(data.name).show();
                $('#map').mousemove(function(e){
                    var mouseX = e.pageX -10;
                    var mouseY = e.pageY -30;
                    $('#tooltip').css({
                        top:mouseY,
                        left:mouseX,
                        'position': 'absolute',
                        'border':'1px solid black',
                        'background': '#fff',
                        'color': '#ffffff',
                        'font-size': '1.5 em',
                        'padding': '5px',
                        'opacity': '0.75',
                        'border-radius': '2px'
                    });
                });
            }, 
            // Hide tooltip when not hovering over state
            mouseout: function(event, data){
                $('#tooltip').hide();
            },
...
</script>

[activeiron]

Hi Kj I am trying to add a tooltip. But its not woking. Can you please look at my code and give me an advice.

<script> $(document).ready(function() { $('#map').usmap({ useAllLabels: true, stateSpecificStyles: { 'AL': {fill: '#529669'}, 'MS': {fill: '#b4a8bc'} stateSpecificHoverStyles: { 'AL': {fill: 'red'}, 'MS': {fill: 'red'} }, mouseover: function(event, data) { $('#tooltip').text(data.name).show(); $('#map').mousemove(function(e){ var mouseX = e.pageX -10; var mouseY = e.pageY -30; $('#tooltip').css({ top:mouseY, left:mouseX, 'position': 'absolute', 'border':'1px solid black', 'background': '#fff', 'color': '#ffffff', 'font-size': '1.5 em', 'padding': '5px', 'opacity': '0.75', 'border-radius': '2px' }); }); }, // Hide tooltip when not hovering over state mouseout: function(event, data){ $('#tooltip').hide(); }, }); }); </script>

[kjrhody]

Can you format your code? It will be easier to troubleshoot. Use the "<>" button in the text editor.

[activeiron]

Thanks for your quick response.

[activeiron]

Hi Kate thanks a lot for your help. So now I have a working code with tooltip. Inside the tooltip I want to have dirrerent text for different states. How I can implement it. Below is my woking code:

<script> $(document).ready(function() { $('#map').usmap({ useAllLabels: true, stateSpecificStyles: { 'ME': {fill: 'red'}, 'WI': {fill: 'red'}, 'MT': {fill: 'red'} }, stateSpecificHoverStyles: { 'ME': {fill: 'green'}, 'WI': {fill: 'green'}, 'MT': {fill: 'green'}

},
// Show tooltip when hovering over state
mouseover: function(event, data) {
    $('#tooltip').text(data.name).show();
    $('#map').mousemove(function(e){
        var mouseX = e.pageX -10;
        var mouseY = e.pageY -30;
        $('#tooltip').css({
            top:mouseY,
            left:mouseX,
            'position': 'absolute',
            'border':'1px solid black',
            'background': '#fff',
            'color': '#ffffff',
            'font-size': '1.5 em',
            'padding': '5px',
            'opacity': '0.75',
            'border-radius': '2px'
        });
    });
}, 
  });
});
</script>
</div>

[kjrhody]

The data.name part should be where the information for each state is taken from. If you create an array in the code you could probably alter the text if needed.

[activeiron]

Thanks a lot for your quick response.

[activeiron]

So if I want to display the tooltip text like this, how can I code it?
For
ME = "Hot" ,
WI = "Cold",
MT= "Normal".

What are the changes needed in my code?

<script> $(document).ready(function() { $('#map').usmap({ useAllLabels: true, stateSpecificStyles: { 'ME': {fill: 'red'}, 'WI': {fill: 'red'}, 'MT': {fill: 'red'} }, stateSpecificHoverStyles: { 'ME': {fill: 'green'}, 'WI': {fill: 'green'}, 'MT': {fill: 'green'}

},
// Show tooltip when hovering over state
mouseover: function(event, data) {
    $('#tooltip').text(data.name).show();
    $('#map').mousemove(function(e){
        var mouseX = e.pageX -10;
        var mouseY = e.pageY -30;
        $('#tooltip').css({
            top:mouseY,
            left:mouseX,
            'position': 'absolute',
            'border':'1px solid black',
            'background': '#fff',
            'color': '#ffffff',
            'font-size': '1.5 em',
            'padding': '5px',
            'opacity': '0.75',
            'border-radius': '2px'
        });
    });
}, 

  });
});
</script>
</div>

[activeiron]

Thansk my code is working. I am using a conditional statement.

[bmanu]

How can i show FULL state name (For Eg 'Texas') on tool tip ? @kjrhody ???

[kjrhody]

@bmanu Make an array somewhere and then use the abbreviation to get the value. E.g.:

let nameList = {
"AL" : "Alabama",
"AK" : "Alaska",
...
}

And then call it in the mouseover function as above using the tooltip code:

$('#tooltip').text(nameList[data.name]).show();

[bmanu]

@kjrhody .. thank you very much... I have done it. But already one array in JS file named 'otherStates' , why we cant use it like 'otherStates[state].full' ?

Also is any way to make all state color full ? :), Thanks

[bmanu]

@kjrhody .. can you help me one more .. I want to add different color to each state . I tried like
'stateSpecificStyles': {
'TX' : {fill: '#999966'}
},
'stateSpecificHoverStyles': {
'TX' : {fill: '#999900'}
},
'stateSpecificStyles': {
'CA' : {fill: '#B12401'}
},
'stateSpecificHoverStyles': {
'CA' : {fill: '#E32F02'}
},
'stateSpecificStyles': {
'AZ' : {fill: '#B12401'}
},
'stateSpecificHoverStyles': {
'AZ' : {fill: '#E32F02'}
},

But its working only at end of the code for AZ ... Thanks

[kjrhody]

@bmanu You have to put all the states in the same call, not make separate ones for each state:

'stateSpecificStyles': {
'AZ' : {fill: '#B12401'},
'CA' : {fill: '#B12401'}
},

[bmanu]

@kjrhody ..Oh lovely .. thank you very much. I tried this. One more . I created an array like you said first 'nameList ' . Can I add these 3 items 'Name of state' ,its 'stateSpecificStyles' & 'stateSpecificHoverStyles' with single key 'State short text' for ex 👍

var stateNamelist = {
CA: {full: "California", fillstyle:"#B12401", fillstyle_H:"#E32F02"}, AZ: {full: "Arizona", fillstyle:"#B12401", fillstyle_H:"#E32F02"}, TX: {full: "Texas", fillstyle:"#999966", fillstyle_H:"#999900"}, etc...

And then call this an array.. how can we ?

Thanks

[kjrhody]

@bmanu Good idea! But you're on your own for that one - I haven't implemented anything like that yet.

[bmanu]

Thanks @kjrhody how can we make an array ?
,stateSpecificStyles: {
'AL': {
fill : '#B12401'
},
'AK': {
fill : '#B12401'
},
'AZ': {
fill : '#B12401'
}

How to make an array here for State code (AL, AK, AZ) & its fill values ?

Thanks

[kjrhody]

@bmanu I suggest reading the documentation, all of that information is in there:

https://newsignature.github.io/us-map/#demo