Select 2 with bootstrap popover

Question

I try to set a bootstrap 3.5 popover on select2 4.0.1, but it seems it does not working:

<input id="sampleInput" type="text" rel="popover" data-content="This is the body of Popover" data-original-title="Creativity Tuts" data-placement="auto" data-trigger="hover" />
<p/>
<select id="selectb" data-content="This is the body of Popover" data-original-title="Creativity Tuts" data-placement="auto" data-trigger="hover" data-container="body">
    <option>Please select ...</option>
    <option value="1">Select2</option>
    <option value="2">Chosen</option>
    <option value="4">selectize.js</option>
    <option value="6">typeahead.js</option>
</select>

the js:

$(function () {
    $('#sampleInput').popover();
    $('#selectb').popover();
    $('#selectb').select2();
});

A sample can be found at http://jsfiddle.net/s4w1z09v/

Any comment ?!

this is because `select2` plugin hide that select box you can try this if you don't want to change html http://jsfiddle.net/1cbh48u9/1/ — Umesh Sehta, Nov 18 '15 at 06:08

score 0 · Accepted Answer · answered Nov 18 '15 at 06:04

As a workaround; you could try:

<input id="sampleInput" type="text" rel="popover" data-content="This is the body of Popover" data-original-title="Creativity Tuts" data-placement="auto" data-trigger="hover" />
<p/>
<span id="selectb-popover"
      data-content="This is the body of Popover"
      data-original-title="Creativity Tuts"
      data-placement="auto"
      data-trigger="hover"
      data-container="body">
    <select id="selectb">
        <option>Please select ...</option>
        <option value="1">Select2</option>
        <option value="2">Chosen</option>
        <option value="4">selectize.js</option>
        <option value="6">typeahead.js</option>
    </select>
</span>

and update your js to:

$(function () {
    $('#sampleInput').popover();
    $('#selectb').select2();
    $('#selectb-popover').popover();
});

Select 2 with bootstrap popover

1 Answers1

Linked