在qtip2中显示一个bootstrap-select元素

Question

我正在尝试在qtip2元素中显示一个bootstrap 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

我也有这个问题，但是我使用的是select2而不是标准的bootstrap select。选择结果显示在.qtip2元素下方。设置select2-results的z-index不起作用。但是，减少qtip容器的z-index是什么呢。

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

.my-qtip2-container 是承载qtip2内容的类。