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制作）点击时，有人可以帮我描述这些图像吗？单击图像时，整个页面内容应该向下，并为整个窗口宽度的描述留出空间，并且每当在其他地方单击时，描述应该消失。
这是否可以具有图像中所示的精确描述（制作by photoshop）附于此问题？
This is link to the image as I am new to stackoverflow can't upload image

Answer 1

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

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

stage.setFullScreen(true);

Answer 2

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

编辑：对于popover的完整视图，只需使用css：

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

如何在图像中添加完整大小的弹出窗口？

2 个答案: