Как сделать несколько подсказок, которые следуют за курсором? - PullRequest
Новая
       27

Как сделать несколько подсказок, которые следуют за курсором?

0 голосов
/ 29 ноября 2018

Я хочу создать несколько всплывающих подсказок на одной HTML-странице, но поскольку идентификатор уникален, это не позволит мне сделать это.Как я могу это изменить?

Пример кода 

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

Пример стиля 

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

.tooltip span {
display:none;
}

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

и JS, с которыми у меня проблемы. 

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

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

Спасибо. 

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

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;
}
<a class="tooltip" href="http://www.google.com/">
Google
<span id="tooltip-reveal">
    <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Поскольку идентификаторы уникальны для страницы, лучше использовать классы, потому что они могут быть повторно использованы на всей странице.Этот JS ищет класс вместо ID.Также обратите внимание, что ссылка была установлена ​​на блок, поэтому вокруг нее больше места.

var tooltipSpan = document.getElementsByClassName("tooltip-reveal");

window.onmousemove = function(e) {
  var x = e.clientX,
    y = e.clientY;

  for (var i = 0; i < tooltipSpan.length; i++) {
    tooltipSpan[i].style.top = (y + 20) + 'px';
    tooltipSpan[i].style.left = (x + 20) + 'px';
  }

};
a {
  display: block;
}

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

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}
<a class="tooltip" href="http://www.google.com/">
Google
<span class="tooltip-reveal">
    <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>


<a class="tooltip" href="http://www.stackoverflow.com/">
Stack Overflow
<span class="tooltip-reveal">
    <img alt="" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />
</span>
</a>
0 голосов
/ 29 ноября 2018

Вы можете использовать class вместо id, но будьте более конкретны в запросе: 

var tooltipSpans = document.querySelectorAll('a.tooltip>.tooltip-reveal');

window.onmousemove = function(e) {

  tooltipSpans.forEach(function(element, index) {
    let x = e.clientX
    let y = e.clientY;
    element.style.top = (y + 20 * index) + 'px';
    element.style.left = (x + 20) + 'px';
  })

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

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}
<a class="tooltip" href="http://www.google.com/">
Google
<span class="tooltip-reveal">
    first tooltip
</span>
<span class="tooltip-reveal">
    second tooltip
</span>
</a>
...