如何在图像中添加全尺寸弹出窗口？

Question

我用这个代码，通过不同的分栏的小装置，媒体装置和大型设备放置在直列六缸图片如下：

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

任何人可以帮助我拥有这些图片的说明时，如点击附图所示（由Photoshop制作）？
当一个图像被点击时，整个页面的内容应该下降，并为整个窗口宽度的描述留出空间，并且无论何时单击其他地方的描述应该消失。
这个问题附带的图像（由photoshop制作）中可能有精确的描述吗？
This is link to the image as I am new to stackoverflow can't upload image

Answer 1

只需添加这对每个IMG data-container="body" data-toggle="popover" data-placement="bottom" data-content="This popover"并确保酥料饼的功能添加到您的js代码$('img').popover()看到这个PEN

编辑： 为popover的完整视图只需使用CSS：

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

Answer 2

我看到你使用bootstrap？为什么不使用工具提示自举libary ...

http://getbootstrap.com/javascript/#tooltips[BootstrapTooltip][1]

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left">Tooltip on left</button>