bootstrap popover不显示在选项上:悬停

时间:2015-04-21 10:25:53

标签: jquery twitter-bootstrap twitter-bootstrap-3 popover bootstrap-popover

我想使用Bootstrap的popover功能在悬停时在<option>元素中显示有关<select> - s的更详细信息。我可以让popover在<button>上悬停工作,但我似乎无法让它在select元素中的<option> - s工作:

<form class="form-horizontal">
  <div class="form-group">
    <label for="x" class="col-md-2 control-label">x</label>
      <div class="col-md-8">
        <select name="x" id="x" class="form-control control">
          <option value="a" data-toggle="popover" data-content="a value" data-title="a">a</option>
          <option value="b" data-toggle="popover" data-content="another value" data-title="b">b</option>
          <option value="c" data-toggle="popover" data-content="yet another value" data-title="c">c</option>
        </select>
      </div>
  </div>
</form>

这似乎与another question有关,但标记不同。供参考,this jsfiddle has a working example to demonstrate the behavior。这是一个bootstrap bug吗?在这种情况下,我没有正确初始化popover吗?

1 个答案:

答案 0 :(得分:1)

我不认为这是一个错误,它似乎是浏览器限制,因为select是本机控件,其下拉列表依赖于底层窗口系统。最重要的是,你想要实现的目标是不可能的。

但是,您可以根据当前select将弹出窗口附加到option本身,并使用不同的数据。