title: Javascript Text following the cursor on mouseover
body: <p>The task is: 
  when I hover the pin with the cursor the text should follow the mouse.
  Unfortunately the position of the text is not correct. Is quite offset.
  It should be next to the pin.</p>
  
  <p>How can I calculate the position in a better way?</p>
  
  <pre><code>var tooltipSpans = document.getElementsByClassName('nav-head');
          window.onmousemove = function (e) {
              var x = e.clientX,
                  y = e.clientY,
                  i, l = tooltipSpans.length;
              for(i = 0; i &lt; l; i++){
                tooltipSpans[i].style.top = (y - 220) + 'px';
                tooltipSpans[i].style.left = (x - 420) + 'px';
              }
          };
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
    var tooltipSpans = document.getElementsByClassName('nav-head');
   
    window.onmousemove = function (e) {
        var x = e.clientX,
            y = e.clientY,
            i, l = tooltipSpans.length;
        for(i = 0; i &lt; l; i++){
          tooltipSpans[i].style.top = (y - 220) + 'px';
          tooltipSpans[i].style.left = (x - 420) + 'px';
        }
    };
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    color: white;
    font-family: "Roboto", sans-serif;
    background: black;
  }
  
  nav.anchor-nav {
    position: fixed;
    top: 0%;
    left: 0rem;
    z-index: 90;
    width: 490px;
    height: 490px;
    background: none;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  nav.anchor-nav ul {
    position: relative;
    display: inline-block;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: auto;
    -webkit-transform: none;
            transform: none;
  }
  nav.anchor-nav li {
    position: absolute;
    display: block;
    cursor: pointer;
    margin-bottom: 0.37rem;
    border-radius: 50%;
    transition: all .2s;
  }
  nav.anchor-nav li:before {
    opacity: 0;
    visibility: hidden;
    color: white;
    font-size: 2.0rem;
    height: 2.2rem;
    margin: 0;
    position: absolute;
    z-index: 1;
  }
  nav.anchor-nav li.active a {
    width: 100%;
    height: 100%;
  }
  nav.anchor-nav li.active a:after {
    border: 1px solid orange;
    background-color: orange;
  }
  nav.anchor-nav li.active a span {
    opacity: 1;
    visibility: visible;
  }
  nav.anchor-nav li.active:before {
    opacity: 1;
    visibility: visible;
  }
  nav.anchor-nav li.section01 {
    width: 40px;
    height: 40px;
    top: 380px;
    left: 55px;
  }
  nav.anchor-nav li.section01 .nav-head {
    left: -150px;
    top: 50px;
  }
  nav.anchor-nav li.section02 {
    width: 40px;
    height: 40px;
    top: 380px;
    left: 367px;
  }
  nav.anchor-nav li.section02 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section03 {
    width: 40px;
    height: 40px;
    top: 210px;
    left: 40px;
  }
  nav.anchor-nav li.section03 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section04 {
    width: 40px;
    height: 40px;
    top: 210px;
    left: 407px;
  }
  nav.anchor-nav li.section04 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section05 {
    width: 40px;
    height: 40px;
    top: 210px;
    left: -50px;
  }
  nav.anchor-nav li.section05 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section06 {
    width: 40px;
    height: 40px;
    top: 210px;
    left: 470px;
  }
  nav.anchor-nav li.section06 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section07 {
    width: 40px;
    height: 40px;
    top: 30px;
    left: 410px;
  }
  nav.anchor-nav li.section07 .nav-head {
    left: 0px;
    top: 50px;
  }
  nav.anchor-nav li.section08 {
    width: 40px;
    height: 40px;
    top: 1px;
    left: 50px;
  }
  nav.anchor-nav li.section08 .nav-head {
    left: -150px;
    top: 50px;
  }
  nav.anchor-nav li:hover a:after {
    border: 1px solid orange;
    background-color: orange;
  }
  nav.anchor-nav li:hover a span {
    display: block;
    position: fixed;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
  }
  nav.anchor-nav li:hover:before {
    opacity: 1;
    visibility: visible;
  }
  nav.anchor-nav a {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  nav.anchor-nav a:after {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    border: 1px solid #fff;
    transition: all .4s;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    background: transparent;
  }
  nav.anchor-nav a span {
    display: none;
    transition: all .4s;
    opacity: 0;
    visibility: hidden;
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;nav class="anchor-nav" role="navigation" id="navigation" style="visibility: inherit; opacity: 1;"&gt;
      &lt;ul class="dotstyle"&gt;
        &lt;li class="section01 webfont-plus" id="anchor1"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titleone" &gt; 
  
  
  &lt;h1&gt;The industry today&lt;/h1&gt;&lt;h3 class="bl"&gt;Digital innovation at pace&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section02 webfont-plus" id="anchor2"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titletwo" &gt; 
  
  
  &lt;h1&gt;Becoming an
  intelligent enterprise&lt;/h1&gt;&lt;h3 class="bl"&gt;Preparing the business for future possibilities&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section03 webfont-plus" id="anchor3"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titlethree"&gt; 
  
  
  &lt;h1&gt;Augmenting upstream&lt;/h1&gt;&lt;h3 class="bl"&gt;Incredible business benefits at your fingertips&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section04 webfont-plus" id="anchor4"&gt;
          &lt;a href="#" class=""&gt;
  &lt;span class="nav-head titlefour" &gt; 
  
  
  &lt;h1&gt;Next-generation
  business processes&lt;/h1&gt;&lt;h3 class="bl"&gt;The opportunity to explore technology&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section05 webfont-plus" id="anchor5"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titlefive" &gt; 
  
  
  &lt;h1&gt;The changing
  work force&lt;/h1&gt;&lt;h3 class="bl"&gt;Navigating a complex ecosystem&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section06 webfont-plus" id="anchor6"&gt;
          &lt;a href="#" class=""&gt;
  &lt;span class="nav-head titlesix" &gt; 
  
  
  &lt;h1&gt;Transform finance&lt;/h1&gt;&lt;h3 class="bl"&gt;Modernize the backbone of the enterprise&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section07 webfont-plus" id="anchor7"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titleseven" &gt; 
  
  
  &lt;h1&gt;Retail expansion, not
  increased complexity&lt;/h1&gt;&lt;h3 class="bl"&gt;Maintain efficiency as you grow&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="section08 webfont-plus" id="anchor8"&gt;
          &lt;a href="#"&gt;
  &lt;span class="nav-head titleeight" &gt; 
  
  
  &lt;h1&gt;SAP solutions
  for Oil and Gas&lt;/h1&gt;&lt;h3 class="bl"&gt;Paving the way for an infinite loop
  of innovation&lt;/h3&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
    &lt;/nav&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>