Bootstrap

Tooltip with HTML content

Did you know that we eat more apples than any other fruit. But did you also know that apples from the supermarket are not fresh.

What are Bootstrap Tooltips?

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.

HTML
<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>

Explanation

  1. data-bs-toggle="tooltip": This is the attribute that tells Bootstrap to apply the tooltip behavior.
  2. 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.
  3. You can pass any HTML content (like <strong>, <em>, <br>, etc.) directly within the title attribute.
  4. Always initialize the tooltip with JavaScript, even though you’ve set the HTML content with the data-bs-html attribute.
JS
<script>
$(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})
</script>
CSS
.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;
}
Basic Page Button alignment Button styles Button with icon Only Button with text and icon on the left Button with text and icon on the right Content pagination Include CSS and JS Files Modal window Popover Popover with HTML content Progress bars Progress bars with tooltip Popover with HTML content and a close button Responsive cards Responsive cards styled like business cards Responsive cards styled like post-it notes Responsive columns Table Table pagination with keyboard keys Tabs Tooltip Tooltip with HTML content