Bootstrap tooltips are small pop-up boxes that appear when users hover over, focus on, or tap an element. To create a tooltip, add the data-toggle="tooltip" attribute to an HTML element and use the title attribute to specify the text that should appear.
In Bootstrap, you can also create a tooltip with HTML content (see demo above) by using the data-bs-html attribute and setting it to true. This allows you to include HTML content inside the tooltip instead of just plain text.
<div class="demo-container"> <div class="demo-caption"> <i class="fa-solid fa-lightbulb fa-pull-left"></i> Did you know that we eat more apples than any other fruit. But did you also know that apples from the <span class="pop-over-text" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<div class='pop-over-content'> <p><img src='apples-supermarket.jpg' alt='' class='demo-caption-image' /></p> <p>Supermarket apples are usually covered in wax, hot-air dried, and sent into cold storage. After six to twelve months, they finally land on the grocery store shelves.</p></div>"> supermarket</span> are not fresh.</div>
data-bs-toggle="tooltip": This is the attribute that tells Bootstrap to apply the tooltip behavior.data-bs-html="true": This allows HTML content inside the tooltip. If you don't use this, the tooltip will treat the content as plain text, and HTML tags will be escaped.<strong>, <em>, <br>, etc.) directly within the title attribute.data-bs-html attribute.
.demo-container {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center;
min-height: 320px;
padding: 2rem;
}
.demo-caption {
max-width: 360px;
background-color: rgba(130, 166, 52, 0.60);
padding: 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.2em;
line-height: 1em;
border-radius: 10px;
border: 4px solid rgba(255, 255, 255, 0.24);
}
.demo-caption-image {
height: 60px;
width: 60px;
border: 4px solid #fff;
border-radius: 100%;
margin-top: 14px;
}
.pop-over-text {
color: #FFFFFF;
border-bottom: 1px dashed #FFFFFF;
cursor: help;
}
.pop-over-content p {
margin: 4px 0 14px 0;
line-height: 1em;
}
.fa-pull-left {
font-size: 1.2em;
color: #FFFFFF;
}
<script>
$(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})
</script>