在 qtip2 中显示引导选择元素答案

【问题标题】：show a bootstrap-select element inside a qtip2在 qtip2 中显示引导选择元素
【发布时间】：2016-07-01 16:48:15
【问题描述】：

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

select 元素隐藏在 qtip 元素后面，调整 z-index 似乎没有任何作用

html

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

$(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/

【问题讨论】：

标签： jquery twitter-bootstrap-3 qtip2 bootstrap-select

【解决方案1】：

.qtip-content
{
    overflow: visible;
}

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

【讨论】：

【解决方案2】：

我也遇到了这个问题，但是我使用的是 select2 而不是标准的引导选择。选择结果出现在 .qtip2 元素下方。设置 select2-results 的 z-index 不起作用。这样做是为了减少 qtip 容器的 z-index。

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

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

【讨论】：