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/

Martineau

Can you create a jsfiddle.net for this? – Lodge

Live example - jsfiddle.net/8odneso7 – Martineau

This might be something you can work on, but it's not ideal jsfiddle.net/8odneso7/1 Normally select2 should pass event to the <select>, but doens't seem to be working. (select2.github.io/options.html - search for public events) – Lodge

well, it's better than nothing so far... – Martineau

The problem is that the <select> is actually hidden by select2. Which makes it impossible to hover over it, and also show a tooltip relative to it. – Lodge

somehow it works if I add that extra snippet in my application (can't get it working with jsfiddle), the only issue that title needs to be defined in JS code. This code did the trick with select2 3.5.2, but it doesn't work with 4.0 - pastebin.com/jcw2Fyce – Martineau

Let us continue this discussion in chat. – Lodge

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', '');

Lodge

I need to show the tool tip for both the selectbox and the selected option so I took your answer and did this... return $(this).prev().attr("title") + $(this).prev().children(":selected").attr("title") – Iridissa

Answer 2

With Bootstrap 5.2.3 and Select2 4.0.13, the following adaptation of an earlier answer gets around the problem of having to wait for full initialisation of Select2, by using delegation from the parent element:

$('select').select2({
    ...
})
.parent().tooltip({
    selector: '.select2-container',
    trigger : 'hover',
    title: function() {
        return $(this).prev().attr('title');
    }
});

Consequence

cool, this works for me on Bootstrap 4.6+ too – Shrader