Safari :hover issue

Hover state stays :hover when moving from down to up over the tooltips.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div class="x">
  <h4>
    John doe 1
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
</div>
<div class="x">
  <h4>
    John doe 2
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
</div>
<div class="x">
  <h4>
    John doe 3
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
</div>
<div class="x">
  <h4>
    John doe 4
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
</div>
<div class="x">
  <h4>
    John doe 5
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
</div>
<div class="x">
  <h4>
    John doe 6
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
  </h4>
</div>
<div class="x">
  <h4>
    John doe 7
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
  </h4>
</div>
<div class="x">
  <h4>
    John doe 8
    <span class="glyphicon glyphicon-star" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
  </h4>
</div>

CSS

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot');
  src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
*, *:before, *:after {
  box-sizing: border-box;
}
.glyphicon:before {
  content: "\e006";
}
.glyphicon {  
  float: right;
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-weight: 400;
}
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-size: 12px;
  font-weight: normal;
}
.tooltip-inner {
  max-width: 200px;
  color: #fff;
  background-color: #000;
}
.tooltip-arrow {
  display: none;
}

.x {
  background-color: #ededed;
}
.x:hover {
  background-color: lightblue;
}

JavaScript

/* ========================================================================
 * Bootstrap: tooltip.js v3.3.6
 * http://getbootstrap.com/javascript/#tooltip
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

+function ($) {
  'use strict';

  // TOOLTIP PUBLIC CLASS DEFINITION
  // ===============================

  var Tooltip = function (element, options) {
    this.type       = null
    this.options    = null
    this.enabled    = null
    this.timeout    = null
    this.hoverState = null
    this.$element   = null
    this.inState    = null

    this.init('tooltip', element, options)
  }

  Tooltip.VERSION  = '3.3.6'

  Tooltip.TRANSITION_DURATION = 150

  Tooltip.DEFAULTS = {
    animation: true,
    placement: 'top',
    selector: false,
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    container: false,
    viewport: {
      selector: 'body',
      padding: 0
    }
  }

  Tooltip.prototype.init = function (type, element, options) {
    this.enabled   = true
    this.type      = type
    this.$element  = $(element)
    this.options   = this.getOptions(options)
    this.$viewport = this.options.viewport && $($.isFunction(this.options.viewport) ? this.options.viewport.call(this, this.$element) : (this.options.viewport.selector || this.options.viewport))
    this.inState   = { click: false, hover: false, focus: false }

    if (this.$element[0] instanceof document.constructor && !this.options.selector) {
      throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!')
    }

   ...