Search code examples
javascriptjquerygsap

Javascript Text following the cursor on mouseover

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.

How can I calculate the position in a better way?

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 < l; i++){
              tooltipSpans[i].style.top = (y - 220) + 'px';
              tooltipSpans[i].style.left = (x - 420) + 'px';
            }
        };


 
		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 < l; i++){
		      tooltipSpans[i].style.top = (y - 220) + 'px';
		      tooltipSpans[i].style.left = (x - 420) + 'px';
		    }
		};
 
* {
  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;
}
<div class="container">
  <nav class="anchor-nav" role="navigation" id="navigation" style="visibility: inherit; opacity: 1;">
    <ul class="dotstyle">
      <li class="section01 webfont-plus" id="anchor1">
        <a href="#">
<span class="nav-head titleone" > 


<h1>The industry today</h1><h3 class="bl">Digital innovation at pace</h3></span></a></li>
      <li class="section02 webfont-plus" id="anchor2">
        <a href="#">
<span class="nav-head titletwo" > 


<h1>Becoming an
intelligent enterprise</h1><h3 class="bl">Preparing the business for future possibilities</h3></span></a></li>
      <li class="section03 webfont-plus" id="anchor3">
        <a href="#">
<span class="nav-head titlethree"> 


<h1>Augmenting upstream</h1><h3 class="bl">Incredible business benefits at your fingertips</h3></span></a></li>
      <li class="section04 webfont-plus" id="anchor4">
        <a href="#" class="">
<span class="nav-head titlefour" > 


<h1>Next-generation
business processes</h1><h3 class="bl">The opportunity to explore technology</h3></span></a></li>
      <li class="section05 webfont-plus" id="anchor5">
        <a href="#">
<span class="nav-head titlefive" > 


<h1>The changing
work force</h1><h3 class="bl">Navigating a complex ecosystem</h3></span></a></li>
      <li class="section06 webfont-plus" id="anchor6">
        <a href="#" class="">
<span class="nav-head titlesix" > 


<h1>Transform finance</h1><h3 class="bl">Modernize the backbone of the enterprise</h3></span></a></li>
      <li class="section07 webfont-plus" id="anchor7">
        <a href="#">
<span class="nav-head titleseven" > 


<h1>Retail expansion, not
increased complexity</h1><h3 class="bl">Maintain efficiency as you grow</h3></span></a></li>
      <li class="section08 webfont-plus" id="anchor8">
        <a href="#">
<span class="nav-head titleeight" > 


<h1>SAP solutions
for Oil and Gas</h1><h3 class="bl">Paving the way for an infinite loop
of innovation</h3></span></a></li>

    </ul>

  </nav>

</div>

Solution

  • There is no reason to use javascript for that. It can be accomplished simply using HTML and CSS.

    Just make a tooltip as one component, eg:

    <div class="tooltip">
    <span class="dot"></span>
    <div class="content">
        <h1>Tooltip heading</h1>
        <p>Some random text blah blah...</p>
    </div>
</div>

    So you have tooltip which contains everything it needs: dot and it's contents just right next to it.

    Example jfiddle

    Edit:

    To follow the mouse, get offset of the parent element, subtract it from mouse location and that should do it.

    var offset = $target.parentElement.getBoundingClientRect();
$target.style.top = (e.clientY - offset.top) + 'px';
$target.style.left = (e.clientX - offset.left) + 'px';

    Here's an example jfiddle