0

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?

Community
  • 1
  • 1
dino
  • 3,093
  • 4
  • 31
  • 50

1 Answers1

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.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
  • Interesting. So when you click on a ` – dino Apr 21 '15 at 10:43
  • Well, its embedded in the DOM, as the info comes from there, but the rendering is not done in the HTML engine of the browser, it is delegated to the WM, which renders the dropdown. – meskobalazs Apr 21 '15 at 10:45
  • OK; that's good to know. I'm going to leave this question open for a day or two to see if anyone else has a workaround, but this makes sense to me. – dino Apr 21 '15 at 10:46