Angular: Empty Fiddle

http://angularjs.org/

by Osama Qassar

HTML

<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-controller="myController">
  <button ng-click="updateElement()">
    Change content
  </button>
  <div ng-repeat="element in elements">
    Some content
    <div my-tooltip="element.content" class="block">Hover me</div>
  </div>
</div>

CSS

.block
{
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

.tooltip
{
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  padding: 5px;
  color: white;
  background: black;
  z-index: 5000;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.elements = [
    {content: 'one'},
    {content: '<b>two</b>'},
    {content: '<img src="https://a.wattpad.com/useravatar/Chaton-ambulant.128.910704.jpg"/>'}
  ];
  
  $scope.updateElement = function() {
  	$scope.elements[1].content = 'changed';
  };
});

app.directive('myTooltip', function($compile, $sce) {
  return {
    restrict: 'A',
    scope: {
      content: '=content'
    },
    link: function(scope, element, attrs) {
	
  		/* Attributes */
    
      scope.displayTooltip = false;
      
      /* Methods */
      
      scope.updateTootipPosition = function(top, left) {
        tooltip.css({
            top: top + 'px',
            left: left + 'px',
          });
      };
      
      scope.getSafeContent = function(content) {
      	return $sce.trustAsHtml(content);
      };
      
      /* Bootstrap */

      var tooltip = angular.element(
      	'<div ng-show="displayTooltip" class="tooltip">\
        	<span ng-bind-html="attrs.myTooltip"></span>\
        </div>'
      );

      angular.element(document.querySelector('body')).append(tooltip);
      
      /* Bindings */
      
      element.on('mouseenter', function(event) {
        scope.displayTooltip = true;
        scope.$digest();
      });
      
      element.on('mousemove', function(event) {
        scope.updateTootipPosition(event.clientY + 15, event.clientX + 15);
      });
      
      element.on('mouseleave', function() {
        scope.displayTooltip = false;
        scope.$digest();
      });
      
      /* Compile */
      
      $compile(tooltip)(scope);
    }
  };
  
});