Javascript tooltip didn't move with mouse move

Question

How to fix this code, now tooltip partially working, tooltip showing but not follow mouse. ON jsfiddle working without problems.

Source here https://jsfiddle.net/mgbv5tzx/212/ and HTML-Tooltip position relative to mouse pointer

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

Thanks for help

score 0 · Accepted Answer · answered Nov 02 '18 at 09:30

You should refer how to put javascript in html file to undertand:

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

I edit your sample you can refer Solution 1: I put script in head after I use onload to call script

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

Solution 2: I put script in body

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

Code working now, but similar problem occur when i try put in couponcode, example what i try to do: This is a tooltip @thanhdung0312 — kamil445, Nov 02 '18 at 10:28

Javascript tooltip didn't move with mouse move

1 Answers1