Test

by Danielle Parkinson

HTML

<body>
  <div class="tile">
  
    <div class="emotion-wrapper-single">
      <div class="popover" data-toggle="popover">POPOVER</div>
      <p>Hover over me</p>
    </div>
    
  </div>
</body>

CSS

.tile {
      background: black;
      padding: 50px;
    }
    
    .emotion-wrapper-single {
      background: grey;
      height: auto;
      width: 100px;
      padding: 20px;
      margin: 80px;
      text-align: center;
      color: white;
    }
    .popover {
        width: auto;
        height: auto;
        left: 30px;
        padding: 8px;
        border-radius: 2px;
        border: 1px solid @blue;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
        font-size: 12px;
        display: none;
        position: fixed;
        color: black;
    }

JavaScript

// Wrap everything in this self-executing function so that other people
// don't accidentally use your variables (note the starting semi-colon, 
// and the brackets at the bottom too)
;(function() {
  var emotionPopover
  var emotionPopoverIsVisible = false

  // You don't want to set the onmousemove function every time the user
  // hovers over the p tag. Just set it at the beginning.
  window.onmousemove = function (e) {
    // We use this "isVisible" flag so that we're not moving the box around needlessly
    // when the box isn't even visible
    if (emotionPopoverIsVisible) {
      var x = e.clientX;
      var y = e.clientY; // Every variable should have var before it
			// Brackets should go around the maths bit to make sure you're doing the
      // subtraction before converting the result to a string
			emotionPopover.css({ top: (y - 45) + 'px' });
      emotionPopover.css({ left: (x - 15) + 'px' });
    }
  }

  // You don't need function(e) because you're not using e
  $('body').on('mouseover', '.emotion-wrapper-single', function() {
    // Just find the popover element once. || means "or" – i.e., set emotionPopover
    // to be itself, or if it hasn't already been set, find it for the first time.
    // This saves us from finding the element again every time the user hovers.
    emotionPopover = emotionPopover || $(this).find('.popover')
    emotionPopover.show();
    emotionPopoverIsVisible = true
   });

  $('body').on('mouseout', '.emotion-wrapper-single', function() {
    emotionPopover.hide();
    emotionPopoverIsVisible = false
  });
})();