bootstrap option:hover 上未显示弹出框

Question

我想使用 Bootstrap 的 popover 功能在悬停时在 <select> 元素中显示有关 <option>-s 的更多详细信息。我能够让弹出窗口在 <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 except the markup is different. For reference, this jsfiddle has a working example to demonstrate the behavior 有关。这是 bootstrap 错误吗？在这种情况下我没有正确初始化弹出窗口吗？

Answer 1

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

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