Как поместить изображение и текст в подсказку?

Question

Я хочу поместить всплывающую подсказку в изображение, которое будет отображать небольшой экран с img, текстом и возможностью использовать HTML, CSS, я использую boostrap и не знаю, что делать дальше: <</p>

Что-то вродеэто: образец

Это просто часть кода.

    <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="container">
              <div class="row">
              <div class="col-md-12 align-content-center">
                  <div class="col-lg-12 text-center">
                    <h3 class="text-uppercase">Team of 2018-2019</h3>
                    </div> 
                <div class="team-memberpre">
                      <img class="mx-auto rounded-circle" src="...image...">
                      <h4>...name....</h4>
                  <p class="text-muted">President</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">
                <div class="team-member">
                  <img class="mx-auto rounded-circle" src="..image.." alt="">
                  <h5>...name....</h5>
                  <p class="text-muted">Lead Marketing</p>
                </div>
              </div>
              </div>
          </div>
      </div>

Answer 1

Вот jsfiddle exmaple

Вы можете получить изображение + текст с помощью всплывающего окна с data-html="true" и data-content="html code"

ваш .html код

<div class="d-flex justify-content-center">
  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content='<div class="row">
    <div class="col">
      <img src="https://www.anime-planet.com/images/anime/covers/naruto-22.jpg" width=60 height=60 />
    </div>
    <div class="col">
      <b>some</b> text here
    </div>
  </div>'>
  Popover on with image and text
</button>
</div>

.js file

$(function() {
  $('[data-toggle="popover"]').popover()
})