Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1.
Could this be a bug or am I overlooking something?
Here is the code snippet:
/** Tooltip */
$(function() {
$('.my_tooltip').tooltip({
placement: "right",
html: true,
title: `Colors explanation:
<table style="width:100%">
<tr>
<td>
<div class='color-box bg-green'></div>
</td>
<td style='text-align:left;'>Green : available</td>
</tr>
<tr>
<td>
<div class='color-box bg-orange'></div>
</td>
<td style='text-align:left;'>Orange : pre-booked</td>
</tr>
<tr>
<td>
<div class='color-box bg-red'></div>
</td>
<td style='text-align:left;'>Red : booked</td>
</tr>
</table>
`
});
});
/* Load icons */
feather.replace();.bg-green {
background: green;
}
.bg-orange {
background: orange;
}
.bg-red {
background: red;
}
.color-box {
width: 10px;
height: 10px;
margin: 10px;
}<!-- Bootstrap -->
<link rel="stylesheet" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO">
<!------------------------------------------------------------->
<i data-feather="help-circle" class="my_tooltip"></i>
<!------------------------------------------------------------->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- NOT WORKING BOOTSTRAP VERSION -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- WORKING BOOTSTRAP VERSION -->
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->