Scenario:
Currently, I am working on creating a popover (tooltip) using Bootstrap 3.3.7. In order to achieve this, I have structured my HTML file as follows:
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;
}<!-- Utilizing Bootstrap 3 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecdd0cdd0c9">[email protected]</a>/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">
<!-- =================== -->
<!-- CRITICAL SECTION HERE -->
<popover data-target="about-author-image-index">?</popover>
<!-- CRITICAL SECTION HERE -->
<!-- =================== -->
<!--=== Other stuff ===-->
</div>
</div>
<div class="col-md-7">
<!--=== IMPORTANT: Right column that I'll reference later ===-->
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->Issue:
While testing the popover tooltip, I noticed that the hover CSS effect was not activating on one side of the element. To better illustrate this problem, here is a GIF demonstrating how the hover effect is not working on the bottom right side of the element: https://i.sstatic.net/qhhau.gif
Desired Outcome:
I am expecting the hover effect to activate anytime my mouse is within the circular border of the element. It should not matter whether my mouse is on the bottom right side or any other side of the element.