Imagemap: Leave clicked area's tooltip displayed on mouseout?

Question

I am using the plugin Imagemapster to add highlighting and tooltip functions to an image map. It provides callbacks like so:

 image.mapster(
{

   mapKey: 'name',
   listKey: 'name',
   onClick: function (e) {
        if(!$(this).hasClass('clicked')){
           $(this).addClass('clicked');     
        }
        $('#selections').html(xref[e.key]);           
    },
   onMouseover: function (e) {

        $('#selections').html(xref[e.key]);

    },
    onMouseout: function (e) {
         if(!$(this).hasClass('clicked')){
            $('#selections').html('');
         }
    },

});

Here is my example:

http://jsfiddle.net/5scbh/6/

If you click an item, I want that item's tooltip to remain displayed even if you mouseout. I'm sort of there, but the problem is: if you click an item, and then mouseover another area and then mouseout... it doesn't keep the clicked item's tooltip on mouseout.

I like that the tooltip changes on mouseover to whatever you rollover, but once you mouseout of that area or the imagemap, I want it to go back to showing the tooltip of whatever area has been clicked. If you unclick the clicked area so that nothing is clicked, then the tooltip should go away.

Can you help me do this? Thank you.

robotroll · Accepted Answer · 2014-05-21T01:27:41.177

0

You can store your current tooltip in a data attribute, then write it back on mouse out.

...
onClick: function (e) {
    if(!$(this).hasClass('clicked')){
               $(this).addClass('clicked');     
        }

    $('#selections').html(xref[e.key]);
    $( '#selections' ).data( 'storage', xref[e.key] );

},

...
onMouseout: function (e) {
    if(!$(this).hasClass('clicked')){
        $('#selections').html('');
             }
        if( $( '#selections' ).data( 'storage' ) ) {
            $( '#selections' ).html( $( '#selections' ).data( 'storage' ) );
        };
    },
....

updated your fiddle acordingly.

edited May 21 '14 at 01:27

answered May 21 '14 at 01:02

robotroll

16
2

yes, that worked, thank you! I have one remaining concern. Is there a way to remove the clicked tooltip if you unclick the area? Meaning, if you click the selected area again to deselect it (so that nothing is "clicked")? – LBF May 21 '14 at 01:46
I figured out the issue with the clicking/unclicking. So I will mark this as the correct answer since you solved the issue with the tooltip. Thank you! – LBF May 21 '14 at 05:13

score 0 · Answer 2 · answered May 21 '14 at 05:18

Here is the updated fiddle, using the correct edits provided by @robotroll, as well as the solution to the selecting/deselecting issue described in my comment above.

That part was solved by using this code:

  onClick: function (e) {
        if (e.selected) {
            $(this).addClass('clicked');                
            $('#selections').html(xref[e.key]);         
            $('#selections').data( 'storage', xref[e.key] );
        } else {
            $(this).removeClass('clicked');             
            $('#selections').removeData();
            $('#selections').html('');
        }           
    },

http://jsfiddle.net/5scbh/10/

Imagemap: Leave clicked area's tooltip displayed on mouseout?

2 Answers2