select2 4.0 和 bootstrap 工具提示

Question

有人使用 bootstrap 3.x 工具提示获得 select2 4.0 吗？我不能再在 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 元素中不显示任何工具提示（在 "normal" 选择中工作正常）。我在这个网站上找到了一些解决方案，但它们只适用于旧的 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 本身中定义了标题时它才有效（如果从 JS 代码中删除 "title" 元素则无效）：

$(".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"
});

需要放置 'auto'，因为 select 和顶部的正文之间没有 padding/margin，至少在 jsfiddle 中没有。

如果您想去掉选项上的工具提示：

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

select2 4.0 and bootstrap tooltip