How to show a tooltip? - Githubissues

josetlaseca commented 10 years ago

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 commented 10 years ago

'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 commented 9 years ago

Very nice!

baconjulie commented 9 years ago

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 commented 7 years ago

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 commented 7 years ago

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>