How to put image and text into tooltip? - html

Question

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>

Answer 1

Here's a jsfiddle exmaple
You can achieve image + text with popover with data-html="true" and data-content="html code"
your .html code
<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()
})