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

Question

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

    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 我们可以过滤它们。检查我更新后的代码，看看它是否按您希望的那样工作。