即使悬停它也要保持打开弹出窗口

Question

我有一个带有某些网页设置的弹出窗口。用户单击侧面菜单项后，将启动弹出窗口。当前的问题是，当用户将鼠标悬停时，弹出窗口将关闭。我希望弹出窗口保持打开状态，直到用户再次单击相同的侧面菜单项为止。

$(document).ready(function() {
  $('#versionHistoryPicker').hide();
  $('#versionHistory').popover({
    content: $('#versionHistoryPicker'),
    placement: 'right',
    html: true
  });
  $('#versionHistory').popover('show');
  $('#versionHistory').popover('hide');
  $('#versionHistoryPicker').show();

  $('._content').mouseleave(function() {
    $('#versionHistory').popover('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<li class="treeview">
  <a href="#">
    <i class="fa fa-navicon"></i> <span>History Settings</span>
    <span class="pull-right-container">
             <i class="fa fa-angle-left pull-right"></i>
             </span>
  </a>
  <ul class="treeview-menu">
    <li>
      <a id="versionHistory">
        <i class="fa fa-circle-o"></i> <span>Version History</span>
        <span class="pull-right-container">
                   <i class="fa fa-angle-right pull-right"></i>
                   </span>
      </a>
    </li>
    <div class='_content' id='versionHistoryPicker' style='width:250px'>
      <div class="form-group">
        <label>Select Version:</label>
        <select class="form-control" id="versionDropdown" style="background-color:#ffffff; color:#777777">
          <option selected="selected" disabled="true"> Please Select Version </option>
        </select>
      </div>
      <button type="submit" class="btn btn-default btn-block" onclick="drawHistoryCharts()">Submit</button>
    </div>
  </ul>
</li>