如何在多个div或元素上使用onmousemove创建工具提示？

Question

我想用onmousemove创建如下所示的tooltip：

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

<div title="regular tooltip">Hover me</div>

<a class="tooltip" href="http://www.google.com/">
    Google
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

但是每个带有不同图像的工具提示，如在此示例中的fiddle上的不同单词。

如果我进入“Google”这个词，工具提示必须显示一个图像，如果我进入另一个单词，工具提示必须显示另一个图像。

我该如何解决？

- Alex Altieri

Answer 1

使用jQuery可以轻松实现。

请注意，ID需要是唯一的，因此当您有多个元素时，需要用类替换它们。

$('.tooltip').on('mousemove', function(e){
  var tooltipImg = $(this).find('.tooltip-span');
  $(tooltipImg).css({
   'top' : e.pageY + 'px',
   'left' : e.pageX + 'px'
  });
});

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:absolute;
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="regular tooltip">Hover me</div>

<a class="tooltip" href="http://www.google.com/">
    Google
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

<a class="tooltip" href="https://jsfiddle.net/">
    JSFiddle
    <span class="tooltip-span">
        <img alt="" src="http://cdn.embed.ly/providers/logos/jsfiddle.png" />
    </span>
</a>

- SKJ

Answer 2

您可以使用 mouseover 事件并将 id 更改为 class='tooltip-span'

$(".tooltip").on('mouseover', function(e) {
  // target will be anchor tag.get its children and add css to it
  $(event.target).children('.tooltip-span').removeAttr('style').css('top', e.clientX + 20 + 'px', 'left', e.clientY + 20 + 'px')
  $(event.target).children('.tooltip-span').css('left', e.clientY + 20 + 'px')
})

.tooltip {
  text-decoration: none;
  position: relative;
}

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="regular tooltip">Hover me</div>

<a class="tooltip" href="http://www.google.com/">
    Google
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png"/>
    </span>
</a>
<a class="tooltip" href="http://www.microsoft.com/">
    Microsoft
    <span class="tooltip-span">
        <img alt="" src="http://www.rcelconnect.org/wp-content/uploads/2016/03/new-microsoft-logo-SIZED-SQUARE-300x297.jpg"/>
    </span>
</a>

- brk