CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
sBourne
sBourne

Reputation: 481

Dialogue box popup on hover for Bootstrap 3

I want to display rows of employee images and, on hover, have a further description box pop up next to the image containing the person's name/biography.

I know hide/show div on hover can be used to achieve this effect, but I'm unsure as to how it will effect the row/col layout.

Any help would be appreciated.

HTML:

<div class="row">
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
</div>

Upvotes: 1

Views: 3083

Answers (1)

KyleMit
KyleMit

Reputation: 30107

I believe what you're looking for is a Popover which should lay on top of the existing grid and not interfere with the placement of your images.

You can trigger it to fire on hover by setting a data attribute on each popover like this: 

data-trigger="hover"

or by passing it into the initializer like this:

.popover({ trigger: "hover" })

Demo in Stack Snippets:

$('[data-toggle="popover"]').popover({
  placement: "auto",
  trigger: "hover"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="row">
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/wq83mXh.jpg" data-toggle="popover" 
           title="Mark Otto" data-content="3,972 commits / 496,347 ++ / 484,436 --" >
    </div>
  </div>
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/RLuBL13.png" data-toggle="popover" 
           title="Chris Rebert"data-content="1,114 commits / 33,796 ++ / 46,366 --">
    </div>
  </div>
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/UP58UYq.jpg" data-toggle="popover"
           title="fat" data-content="805 commits / 143,748 ++ / 100,852 --">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions