show a bootstrap-select element inside a qtip2

Question

I'm trying to show a bootstrap select element inside a qtip2 element.

The select element hides behind the qtip element and adjusting the z-index doesn't seem to do anything

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/

score 0 · Answer 1 · answered Apr 21 '14 at 17:20

0

.qtip-content
{
    overflow: visible;
}

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

answered Apr 21 '14 at 17:20

waspinator

6,464
11
52
78

score 0 · Answer 2 · answered Jul 01 '16 at 08:48

I also had this issue, however I was using select2 instead of the standard bootstrap select. The select results were appearing below the .qtip2 element. Setting the z-index of the select2-results wasn't working. What did though was to reduce the z-index of the qtip container.

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

Where .my-qtip2-container is the class that hosts the qtip2 content.

show a bootstrap-select element inside a qtip2

2 Answers2