根据我悬停的圆圈显示相应的工具提示文本

Question

我有 5 个具有唯一 ID 的可点击圈子，每个圈子都有不同的工具提示文本。所有文本均从 xml 数据接口读取。

    jQuery(function ($) {
    $.ajax({
        type: "GET",
        url: 'steel_agg_bof_flash_en.xml',
        dataType: "xml",
        success: xmlParser
      });
      function xmlParser(xml) {

          $(xml).find("hotspot").each(function () {
            var position   =  $(this).find('position').text();
            var arr        =  position.split(",");
            var hotspotid  =  $(this).find('hsid').text();
            var title      =  $(this).find('title').text();

            $('#clickAreas').prepend('<div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; border-radius: 100%; cursor: pointer; opacity: 0.5;"><div class="tooltip"><p style="color: #ffffff;"> ' + title + '</p></div></div>');
          });

        } 

    });

html 输出如下所示 - http://jsfiddle.net/HJf8q/1860/

javascript 我后来添加的一些 css 部分，因为我正在尝试执行以下操作：

• 当鼠标悬停在圆圈上时，工具提示应该出现淡入淡出效果，然后当鼠标移出圆圈时，提示应该消失在淡入淡出效果中。 （我尝试用一​​个圆圈来做到这一点，但是正如你所看到的，当将鼠标移出圆圈时，而不是慢慢消失，请注意会发生什么 - http://jsfiddle.net/HJf8q/1851/），
• 我不能对一个圈子做正确的事情，你可以看到问题是什么，特别是对于更多圈子来显示相应的工具提示文本，具体取决于我悬停的圈子，因为现在它会影响所有圈子......我不知道，请帮帮我

Answer 1

您必须使用 CSS 过渡并使用工具提示的不透明度来实现淡入淡出效果。这是一个关于如何做到这一点的小例子：

var tooltips = document.querySelectorAll('.clickMapItem .tooltip');

var items = document.querySelectorAll('.clickMapItem').forEach(function(el) {
    el.addEventListener('mousemove', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 1;

            if (typeof tooltip !== "undefined") {
                var x = (e.clientX - 10) + 'px',
                    y = (e.clientY - 70) + 'px';

                tooltip.style.top = y;
                tooltip.style.left = x;
            }
        }
    });

    el.addEventListener('mouseout', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 0;
        }
    });
});

body {
  background: grey;
}

.clickMapItem {
    background: #004593;
    /*position: absolute;
    top: 100px;
    left: 100px;*/
    width: 135px;
    height: 135px;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.5; 
    transition: all 0.5s ease;    
    margin: 30px;
}

.clickMapItem:hover {
    background: #004593;
    opacity: 0.8;

}
.clickMapItem .tooltip {
    /*display:none;*/
    opacity: 0;
    display:block;
    position:fixed;
    overflow:hidden;
    background: black;
    color: white; 
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
   
}
/*.clickMapItem:hover .tooltip {
    opacity: 1;
}*/

/*.clickMapItem:hover .tooltip:before {
  content: ' ';
  position: absolute;
  width: 0px;
  height: 0px;
  left: 38px;
  top: 10px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}*/

<div id="clickMapItem_1" class="clickMapItem">
    <div class="tooltip">
        <p>Tooltip Text</p>
    </div>
</div>


<div id="clickMapItem_2" class="clickMapItem">
    <div class="tooltip">
        <p>One more ytoolytip here</p>
    </div>
</div>

此外，您不应使用全局窗口事件来执行此类特定元素任务。将事件侦听器直接添加到元素，并避免在全局范围内对窗口执行此操作。

更新：

为了修复即使鼠标悬停在工具提示本身上仍显示的工具提示，您需要使用 JavaScript 事件 mousemove 和 mouseout 进行整个悬停处理。这是因为我们不能在 CSS 级别将子元素排除在接收 mousemove 事件之外，但是使用 javascript 我们可以过滤它们。检查我更新的代码，看看它是否能如你所愿。

Answer 2

好的，我设法做到了这种方式

jsfiddle.net/HJf8q/1868/

但我必须做一些修复，例如在悬停时为圆圈添加不透明度并在鼠标移动时添加过渡