select2 4.0和bootstrap工具提示

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元素中不显示工具提示(在"正常"选择中正常工作).我在这个网站上找到了一些解决方案,但它们只适用于旧的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时才有效(如果从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"
});

需要放置"自动",因为顶部的选择和主体之间没有填充/边距,至少在jsfiddle中没有.

如果你想摆脱选项上的工具提示:

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