select2 4.0 and bootstrap tooltip

Question

Did someone get select2 4.0 working with bootstrap 3.x tooltips? I can't display tooltips in select2 4.0 anymore (worked well in 3.5.2). This is HTML code:

<select name="xxx" class="select-full tip" title="some_title">

Here's the javascript:

$('.tip').tooltip({placement: "auto", html: true});
$(".select-full").select2({
    width: "100%",
});

However, no tooltips are displayed in select2 elements (work fine in "normal" selects). I found some solutions on this website, but they only work with old select2.

After examining the code for last 3 days, I found the problem is most likely caused by this line in CSS file that comes with select2:

.select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

If I remove this single line, tooltips work fine, but select2 elements don't look well (two selects are displayed instead of one).

I also found a partial solution. Adding this extra snippet does the trick, but it only works if title is defined in javascript itself (doesn't work if "title" element is removed from JS code):

$(".select2-container").tooltip({
title: "some static title"});

Live example added - https://jsfiddle.net/8odneso7/

Answer 1

Using the bootstrap documentation and some dev tools I found a solution.

The tooltips needs to be created on the select2 container because the original tag hidden by select2. The original title attribute is re-used, which you can render on the server it you wish.

$(".select2-container").tooltip({
    title: function() {
        return $(this).prev().attr("title");
    },
    placement: "auto"
});

Working sample: https://jsfiddle.net/8odneso7/2/

Placement 'auto' was needed because there's no padding/margin between the select and the body at the top, at least not in jsfiddle.

If you want to get rid of the tooltips on the options:

$(".select2-selection span").attr('title', '');