jquery - 在 qtip2 中显示引导选择元素

Question

我正在尝试在 qtip2 元素中显示引导选择元素。

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 而不是标准的引导选择。选择结果出现在 .qtip2 元素下方。设置 select2-results 的 z-index 不起作用。这样做是为了减少 qtip 容器的 z-index。

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

其中.my-qtip2-container是托管 qtip2 内容的类。