bootstrap popover not displaying on option:hover

Question

I'd like to use Bootstrap's popover functionality to display some more detailed information about the <option>-s in a <select> element on hover. I'm able to get the popover to work on hover for a <button>, but I can't seem to get it to work for the <option>-s within a select element:

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

This appears to be related to another question except the markup is different. For reference, this jsfiddle has a working example to demonstrate the behavior. Is this a bootstrap bug? Am I not initializing the popover correctly in this case?

Answer 1

I don't think that this is a bug, it seems a browser limitation, as the select is a native control, its dropdown list is dependent on the underlying windowing system. The bottom line is, what you want to achive is not possible.

However, you can attach the popover to the select itself, with varying data according to the current option.