Does anyone have insight into why the tooltip is slightly off-center (to the right) of the item's top center?
Take a look at this image to see what I mean:
It seems to be the same issue with other items as well, as seen in this example:
Here's the snippet of my HTML code:
<button class="btn btn-icon coverage-item "
type="button"
placement="top"
ngbTooltip="Incendio">
<img src="/assets/img/coverages/icon_thunderbolt.svg"/>
</button>
And here is the corresponding SCSS code:
@import "~bootstrap/scss/_functions.scss";
@import "../../scss/variables";
.coverage-item {
background: $white;
border: 1.5px solid $brand-primary;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;
}
.coverage-item__new {
background: $white;
border: 1.5px dashed $gray-lighter;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;