Подсказка Javascript не двигалась движением мыши - PullRequest
Новая
       5

Подсказка Javascript не двигалась движением мыши

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

Как исправить этот код, теперь подсказка частично работает, подсказка отображается, но не следует за мышью. ПО jsfiddle работает без проблем.

Источник здесь https://jsfiddle.net/mgbv5tzx/212/ и Положение HTML-подсказки относительно указателя мыши 

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip</title>
  <meta charset="UTF-8">
  <script>
function showTooltip(e) {
  var tooltip = e.target.classList.contains("coupontooltip")
      ? e.target
      : e.target.querySelector(":scope .coupontooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
</script>
<style type="text/css">
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    color: black;
    padding: 5px;
    z-index: 1000;
}
</style>

</head>
<body>
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip" style="overflow: hidden;">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.
</body>
</html>

Спасибо за помощь

1 Ответ

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

Вы должны указать, как поместить javascript в html-файл, чтобы выполнить:

https://www.w3schools.com/js/js_whereto.asp

я редактирую ваш образец вы можете сослаться Решение 1. Я использую скрипт в голове после того, как использую onload для вызова скрипта 

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip</title>
  <meta charset="UTF-8">
  <script>
  
function showTooltip(e) {
  var tooltip = e.target.classList.contains("coupontooltip")
      ? e.target
      : e.target.querySelector(":scope .coupontooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

function init() {
  var tooltips = document.querySelectorAll('.couponcode');
  for(var i = 0; i < tooltips.length; i++) {
    tooltips[i].addEventListener('mousemove', showTooltip);
  }
}
</script>
<style type="text/css">
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    color: black;
    padding: 5px;
    z-index: 1000;
}
</style>

</head>
<body onload="init();">
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip" style="overflow: hidden;">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.
</body>
</html>

Решение 2: Я помещаю скрипт в тело 

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip</title>
  <meta charset="UTF-8">

<style type="text/css">
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    color: black;
    padding: 5px;
    z-index: 1000;
}
</style>

</head>
<body>
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip" style="overflow: hidden;">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.
  <script>
  
function showTooltip(e) {
  var tooltip = e.target.classList.contains("coupontooltip")
      ? e.target
      : e.target.querySelector(":scope .coupontooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}


  var tooltips = document.querySelectorAll('.couponcode');
  for(var i = 0; i < tooltips.length; i++) {
    tooltips[i].addEventListener('mousemove', showTooltip);
  }

</script>
</body>
</html>
...