66236686

by Vino Rodrigues

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<div class="m-5 container">


  <span data-bs-customClass="custom-tooltip-does-not-work" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
	[Custom]
  </span>

</div>

CSS

.custom-tooltip.tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

JavaScript

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
  	'customClass': 'custom-tooltip'
  })
})