How to add full size popover in an image?

Question

I've used this code to place six images in line by dividing the column differently for small device, medium device and large device as follows:

<div class="row">
    <div class="col-md-12">
        <center><div class="row" style="padding-right:15px;">

                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-02.png" style="width:80%;">
                </div>

                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-03.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-01.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-04.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-05.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-06.png" style="width:80%;">
                </div>
        </div></center>
    </div>
</div>

Can anybody help me have descriptions of these images when clicked as shown in the image attached (made by photoshop)?
When an image is clicked entire page content should go down and make space for description which is of full window width and whenever clicked somewhere else the description should disappear.
Is this possible to have exact description as shown in the image (made by photoshop) attached to this question?
This is link to the image as I am new to stackoverflow can't upload image

Answer 1

just add this to each img data-container="body" data-toggle="popover" data-placement="bottom" data-content="This popover" and make sure to add popover function to your js code $('img').popover() see this PEN

EDIT: for the full view of popover just use the css:

.popover{
      max-width: 100%;
    width: 100%;
}