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

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 制作）所示？
单击图像时，整个页面内容应该下降并使 space 成为全 window 宽度的描述，每当在其他地方单击时，描述应该消失。
这可能有这个问题所附图片（由 photoshop 制作）中显示的确切描述？
This is link to the image as I am new to Whosebug can't upload image

Answer 1

我看你用的是bootstrap？为什么不使用 bootstrap 库中的工具提示...

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>

Answer 2

只需将此添加到每个 img data-container="body" data-toggle="popover" data-placement="bottom" data-content="This popover" 并确保将 popover 功能添加到您的 js 代码中 $('img').popover() 请参阅此 PEN

编辑：对于弹出窗口的完整视图，只需使用 css:

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

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

How to add full size popover in an image?

html

javascript

css

image

popover