jquery - qtip2 内の bootstrap-select 要素を表示する

Question

qtip2 要素内にブートストラップ select 要素を表示しようとしています。

select 要素が qtip 要素の後ろに隠れており、z-index を調整しても何も起こらないようです

html

<span class="selector">qtip</span>

js

$(document).ready(function () {
    $('.selector').qtip({
        content: {
            text: 'some text here <br>' +
                '<select class="selectpicker">' +
                '<option>Mustard</option>' +
                '<option>Ketchup</option>' +
                '<option>Barbecue</option>' +
                '</select>' +
                '<br>some more text here'
        },
        style: {
            classes: 'qtip-bootstrap'
        },
        show: 'click',
        hide: 'click',
        events: {
            show: function() { $('.selectpicker').selectpicker({container: 'body'}); }, // either one of these seems to work
            render: function() { $('.selectpicker').selectpicker({container: 'body'}); }, // either one of these seems to work
        },
    });
});

http://jsfiddle.net/waspinator/zMsqK/8/

• http://qtip2.com

• http://silviomoreto.github.io/bootstrap-select/3

Answer 1

.qtip-content
{
    overflow: visible;
}

http://jsfiddle.net/waspinator/zMsqK/9/

Answer 2

私もこの問題を抱えていましたが、標準のブートストラップ select の代わりに select2 を使用していました。選択結果は .qtip2 要素の下に表示されていました。select2-results の z-index の設定が機能していませんでした。ただし、qtip コンテナーの z-index を減らすことでした。

.my-qtip2-container{
     z-index:1!important;
}

.my-qtip2-containerは、qtip2 コンテンツをホストするクラスです。