Looking for some stylish help buttons on my website using jQuery and tooltips.
Although they show up in the Element search, they are not visible on the site.
Take a look at the code snippet below:
<div class="card-header">
<h5 style="float: left">Key Information</h5>
<button id="help" type="button" class="btn btn-outline-secondary"
data-toggle="tooltip" data-placement="left"
title="Test Test" style="float: right; padding-left: 8px; padding-right: 8px">
<i class="fas fa-life-ring"> <Help
</button>
</div>
In the script section:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
Included source files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js">
</script>
Even though the tooltip appears in the html code upon hovering, the actual tooltip box does not show up.
Your input will be greatly appreciated!