IE和Firefox上标题和事件监听器的兼容性问题

Question

我有一个tooltip指令，我将其应用于.chip元素。我使用addEventListener并尝试了我能想到的所有内容（冒泡和捕获事件），IE 11和Firefox 42上的工具提示仍未显示。

有没有办法解决Firefox和IE的这种行为？ （适用于Chrome，Opera和Edge）

请参阅以下代码：（JSFiddle此处为Sass）

工具提示应显示为绿色矩形的onMouseEnter。

angular.module("myApp", ["ngMaterial"])
  .controller("myCtrl", function($scope) {
    $scope.actors = [{}, {}];

    $scope.select = function(e, actor) {};
  })
  .directive("tooltip", function($timeout) {
    var tooltipElement = angular.element(document.getElementById("tooltip"));

    return {
      restrict: 'A',
      link: function($scope, $element, $attrs) {
        $element[0].addEventListener("mouseenter", function(e) {
          e.stopPropagation();
          $timeout(function() {
            tooltipElement.css("display", "block");
            tooltipElement.text($attrs.tooltip);
            tooltipElement.css("left", (e.clientX + 3) + "px");
            tooltipElement.css("top", (e.clientY - tooltipElement[0].offsetHeight - 3) + "px");
          });
        }, false);

        $element[0].addEventListener("mousemove", function(e) {
          e.stopPropagation();
          $timeout(function() {
            tooltipElement.css("display", "block");
            tooltipElement.text($attrs.tooltip);
            tooltipElement.css("left", (e.clientX + 3) + "px");
            tooltipElement.css("top", (e.clientY - tooltipElement[0].offsetHeight - 3) + "px");
          });
        }, false);

        $element[0].addEventListener("mouseleave", function(e) {
          e.stopPropagation();
          tooltipElement.css("display", "none");
        }, false);
      }
    };
  });

#tooltip {
  display: none;
  position: absolute;
  border: 1px solid #FFED80;
  background-color: #FFF6C0;
  padding: 2px;
  z-index: 1;
}
.md-button {
  min-width: 0;
}
md-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  bottom: 30px;
  padding: 0;
  display: flex;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
md-list md-list-item {
  min-height: 0;
  height: 60px;
  width: 60px;
  margin-bottom: 2px;
}
md-list md-list-item .md-no-style {
  padding: 0;
}
md-list md-list-item button {
  padding: 0;
  border-radius: 0;
  min-width: 0;
}
md-list md-list-item button .md-list-item-inner {
  min-height: 0;
}
md-list md-list-item button .md-list-item-inner .picture {
  height: 60px;
  width: 60px;
  opacity: 0.5;
}
md-list md-list-item button .md-list-item-inner .chip {
  position: absolute;
  top: 44px;
  left: 44px;
  height: 15px;
  width: 15px;
  background-color: green;
}
md-list md-list-item button .md-ripple-container {
  border-radius: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
  <md-list id="actorsFlexList">
    <md-list-item ng-repeat="actor in actors" ng-click="select($event, actor)" aria-label="actor">
      <img src="http://cdn.wccftech.com/wp-content/uploads/2015/04/mario-2.png" class="picture" />
      <div class="chip" tooltip="Tooltip is here !"></div>
    </md-list-item>
</div>
<div id="tooltip"></div>