Imagemap：鼠标悬停时显示单击区域的工具提示？答案

【问题标题】：Imagemap: Leave clicked area's tooltip displayed on mouseout?Imagemap：鼠标悬停时显示单击区域的工具提示？
【发布时间】：2014-05-21 13:18:30
【问题描述】：

我正在使用插件 Imagemapster 将突出显示和工具提示功能添加到图像映射。它提供如下回调：

 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('');
         }
    },

});

这是我的例子：

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

如果您单击一个项目，我希望该项目的工具提示即使您鼠标悬停也能保持显示。我有点在那里，但问题是：如果您单击一个项目，然后将鼠标悬停在另一个区域然后鼠标移出...它不会将单击的项目的工具提示保留在鼠标移出上。

我喜欢鼠标悬停时工具提示会更改为您悬停的任何内容，但是一旦您将鼠标移出该区域或图像地图，我希望它返回显示已单击任何区域的工具提示。如果您取消单击单击的区域以便没有单击任何内容，那么工具提示应该会消失。

你能帮我做这件事吗？谢谢。

【问题讨论】：

标签： javascript jquery imagemap imagemapster

【解决方案1】：

您可以将当前工具提示存储在数据属性中，然后在鼠标移出时将其写回。

...
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' ) );
        };
    },
....

相应地更新了你的小提琴。

【讨论】：

是的，成功了，谢谢！我还有一个担忧。如果取消单击该区域，有没有办法删除单击的工具提示？意思是，如果您再次单击所选区域以取消选择它（这样就没有“单击”）？
我发现了点击/取消点击的问题。因此，由于您使用工具提示解决了问题，因此我将其标记为正确答案。谢谢！

【解决方案2】：

这是更新的小提琴，使用@robotroll 提供的正确编辑，以及我上面评论中描述的选择/取消选择问题的解决方案。

这部分是用这段代码解决的：

  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/

【讨论】：