Safari :hover issue

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

by Chris Rebert

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 1

        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 2
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 3
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 4
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 5
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 6
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset users password"></span>
      </h4>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12">
      <h4>
        John doe 7
        <span class="glyphicon glyphicon-star pull-right" data-toggle="tooltip" data-placement="top" title="Reset...

CSS

.col-xs-12 {
  background-color: #EDEDED;
}
.col-xs-12:hover {
  background-color: lightblue;
}

JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})