Question

有人让select2 4.0使用bootstrap 3.x工具提示吗？我不能再在select2 4.0中显示工具提示（在3.5.2中运行良好）。这是HTML代码：

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

这是javascript：

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

但是，select2元素中没有显示工具提示（在＆＃34中工作正常;正常＆＃34;选择）。我在这个网站上找到了一些解决方案，但它们只适用于旧的select2。

在检查过去3天的代码后，我发现问题是很可能由select2附带的CSS文件中的这一行引起：

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

如果我删除这一行，工具提示工作正常，但select2元素看起来不太好（显示两个选择而不是一个）。

我也找到了部分解决方案。添加这个额外的片段可以解决这个问题，但只有在javascript本身定义title时它才有效（如果＆＃34; title＆＃34;元素从JS代码中删除，则不起作用）：

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

Answer 1

使用bootstrap文档和一些开发工具，我找到了解决方案。

需要在select2容器上创建工具提示，因为select2隐藏了原始标记。重新使用原始title属性，您可以在服务器上呈现它。

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

需要放置“自动”，因为顶部的选择和主体之间没有填充/边距，至少不是在jsfiddle中。

如果您想摆脱选项上的工具提示：

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