Photoshop Question posted in
The official user guide can be found here.

How to add full size popover in an image? – Photoshop

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

Tags:

2

Answers


  1. 0

    I see you use bootstrap? why not use the tooltip from the bootstrap libary…

    http://getbootstrap.com/javascript/#tooltips%5BBootstrapTooltip%5D%5B1%5D

    <button type="button" class="btn btn-default" data-toggle="tooltip" 
 data-placement="left" title="Tooltip on left">Tooltip on left</button>
    Login or Signup to reply.
  2. 0

    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%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search