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.

Answer 1

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.