“悬停”对话框弹出，用于引导3。

Question

我希望显示员工图像行，并在悬停时，在包含此人姓名/传记的图像旁边弹出另一个描述框。

我知道在悬停时可以使用隐藏/显示div来实现这个效果，但我不确定它将如何影响行/col布局。

任何帮助都将不胜感激。

<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>

​