Question

我想用tooltip创建一个onmousemove：

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>

但每个tooltip在不同的单词上都有不同的图像，例如小提琴上的这个例子。

如果我去世界“google”，则tooltip必须显示图片，如果我继续使用其他字词tooltip必须显示另一张图片。

我该如何解决？

Answer 1

你可以使用jQuery轻松完成。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

$(".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')
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: