javascript - Bootstrap 3悬停时弹出的对话框

Question

我想显示成行的员工图片，并在悬停时在包含人员姓名/传记的图片旁边弹出一个进一步的描述框。

我知道悬停时隐藏/显示 div 可用于实现此效果，但我不确定它将如何影响行/列布局。

如有任何帮助，我们将不胜感激。

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>

Answer 1

我相信您正在寻找的是 Popover它应该位于现有网格之上，并且不会干扰图像的放置。

您可以通过在每个弹出窗口上设置数据属性来触发它在悬停时触发，如下所示:

data-trigger="hover"  

或者像这样将它传递给初始化程序:

.popover({ trigger: "hover" })

堆栈片段中的演示:

$('[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>