How to put image and text into tooltip?

I want to put tooltip into an image that will display a small will screen with img, text, and able use HTML, CSS I use boostrap and have no ideal what to do next :<

Something like this: sample

This just part of the code.

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