上下文：

我正在使用Bootstrap 3.3.7制作弹出窗口（工具提示）。作为其中的一部分，我有一个HTML文件结构，如下所示：

popover {
  margin-left: 100%;
  padding: 5px 11px;
  border: solid 1px;
  border-radius: 25px;
  font-size: 1em;
  cursor: pointer;
  transition: 0.3s;
}

popover:hover {
  border-color: #D83F58;
  color: #D83F58;
}

<!-- Using Bootstrap 3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row vcentre-column">
    <div class="col-md-5 hide-if-mobile">
      <div class="author-image">
      
        <!-- =================== -->
        <!-- IMPORTANT PART HERE -->
        <popover data-target="about-author-image-index">?</popover>
        <!-- IMPORTANT PART HERE -->
        <!-- =================== -->

        <!--=== Other stuff ===-->
      </div>
    </div>

    <div class="col-md-7">
      <!--=== IMPORTANT: Right column that I'll reference later ===-->
    </div>
  </div>
  <!--/.row-->
</div>
<!--/.container-->

错误：

当我将鼠标悬停在弹出窗口工具提示上时，悬停CSS会激活，除了元素的一侧。下面的GIF显示了悬停在元素右下角是如何不激活的：

预期行为：

每当我的鼠标在圆圈边界内时，悬停就会激活。不管我的鼠标是否在右下角。