Utilizing an icon from Font Awesome to showcase text in a tooltip upon mouseover with Bootstrap, I encountered an issue where the tooltip only displays when hovering over the left half of the icon. This discrepancy occurs on both Edge and Chrome browsers, although I haven't tested other browsers.
The setup involves utilizing AdminLTE as the website template. The HTML, JavaScript, and CSS used are provided below. The icon is placed inside a card element alongside label text.
Upon removing the data-toggle="tooltip" declaration, the tooltip functions correctly despite losing the default browser styling.
HTML:
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Settings</h3>
</div>
<form>
<div class="card-body">
<div class="form-group">
<label>Strategy</label>
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
title="This is a tooltip"></i>
<input type="text" class="form-control" value="3" id="maxPositions">
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
To initialize tooltips:
$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' })
Tooltip CSS (from AdminLTE):
.tooltip {
position: absolute;
z-index: 1070;
display: block;
margin: 0;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
opacity: 0;
}