如何在圖像中添加全尺寸彈出窗口？

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>