HTML Element Hover Not Activating - ONLY on One Side

Question

Context:

I'm making a popover (tooltip) using Bootstrap 3.3.7. As part of that, I have a HTML file structure like this:

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-->

Bug:

When I was hovering over the popover tooltip, the hover CSS would activate, except on one side of the element. Here's a GIF to show how the hover doesn't activate on the bottom right side of the element:

Expected Behaviour:

Whenever my mouse is inside the circle border, the hover should activate. Regardless of whether my mouse is on the bottom right side or not.

Answer 1

Solution:

I noticed that the right column's contents seemed to be overlapping the edge of the tooltip. I checked this using Chrome Dev tools. So I changed my original CSS to specify a high z-index for the popover element. Also, I changed the position to be relative so that the z-index property would have an effect.

Here's the updated CSS:

popover {
  z-index: 10;
  position: relative;
  margin-left: 100%;
  padding: 5px 13px;
  border: solid 1px;
  border-radius: 25px;
  font-size: 1.2em;
  cursor: pointer;
  transition: 0.3s;
}

Here's a GIF showing the overlap between the right column and the popover and then the effect of the updated CSS: