使用jQuery或Javascript将tootip功能添加到select2下拉列表中？

因此，我在一个字段中有一个下拉功能，每当我将鼠标悬停在一个选项上时，我想添加一个工具提示弹出窗口，并且有多个选项。我希望工具提示显示该选项的内容（即“您好”、“问候语”等）。另外，当我将鼠标悬停在某个选项上时，它会添加一个附加类“select2 highlighted”。我怎样才能补偿这一点呢

<div id="select2-drop" class="select2-drop select2-drop-multi select2-display-none select2-drop-active select2-drop-above" style="width: 175px; display: block; top: 653.833px; left: 609.467px;">
    <ul class="select2-results">
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class=select2-result-label">Hello</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class=select2-result-label">Greetings</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class=select2-result-label">Good-bye</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class=select2-result-label">Salutations</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class=select2-result-label">See ya!</div>
        </li>
    </ul>
</div>

下面是我看到的一个我一直在尝试实现的示例

$（'.uitip'）.tooltip（）

违约行为
1.
2.
3.
4.
1.
2.
3.
4.
jQuery UI工具提示
1.
2.
3.
4.
1.
2.
3.
4.

$（.select2结果可选”）.on（“鼠标悬停”，函数（事件）{
$（“.tooltip”）.html（event.target.innerHTML）；
$（“.tooltip”）.css（{“display”：“block”，“left”：（event.clientX+5）+“px”，“top”：（event.clientY+5）+“px”}）；
});
$（“.select2结果可选”）。打开（“鼠标输出”，函数（事件）{
$（“.tooltip”）.css（“显示”、“无”）；
});
/*
版本：3.4.5时间戳：周一11月4日08:22:42太平洋标准时间2013
*/
.选择2个容器{
保证金：0.01雷姆0；
位置：相对位置；
垂直对齐：中间对齐；
字体家族：继承；
-webkit外观：无！重要；
字体大小：0.875rem；
背景：#FAFA url("数据：image/svg+xml；base64，phn2zyb2zxjzaw9upsixljeiglkpsjmyxllcl8xiib4bwxucz0iahr0cdovl3dy53my5vcmcvmjawmc9zdmciihhtbg5zonhsaw5rpsjhodhrwoi8vd3lnczl9yzy8xotk5hsaw5riib4psihg9ijhg9ijgiighlawd0id0id0img3b4i2iij2i2ijjjg2ijg9wv3p94psijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjg9g9g9g9g9g9g9g9wzzjjjjjjjjjj1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+DQo=“）无重复；
背景位置x:100%；
背景位置y：中心；
}
。选择2容器：悬停{
背景色：#F2F2；
边框颜色：#999；
}
。错误。请选择2容器{
页边距底部：0；
}
.选择2个容器，
.选择2下降，
。选择2搜索，
。选择2搜索输入{
/*
强制边框框，使%宽度适合父对象
由于边距/填充，容器没有重叠。
更多信息：http://www.quirksmode.org/css/box.html
*/
-webkit框大小：边框框；/*webkit*/
-moz框大小：边框框；/*firefox*/
框大小：边框框；/*css3*/
}
.选择2个容器。选择2个选项{
显示：块；
溢出：隐藏；
位置：相对位置；
身高：2.315雷姆；
边框：1px实心#ccc；
填充：0.5雷姆1雷姆0.5雷姆0.5雷姆；
空白：nowrap；
线高：1.3125雷姆；
颜色：继承；
文字装饰：无；
-webkit盒阴影：插入0 1px2pRGBA（0,0,0,0.1）；
-moz盒阴影：插入0 1px2pRGBA（0,0,0,0.1）；
盒影：插入0 1px2pRGBA（0,0,0,0.1）；
-webkit触摸标注：无；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.选择2-container.选择2-drop-up.选择2-choice{
/*边框底色：#aaa*/
}
.select2-container.select2-allowclear.select2-choice.select2-choice{
右边距：42px；
}
.选择2容器。选择2选项>。选择2选项{
右边距：1rem；
显示：块；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.选择2容器。选择2选项缩写{
显示：无；
宽度：9px；
高度：9px；
位置：绝对位置；
右：24px；
顶部：13px；
字号：1px；
文字装饰：无；
边界：0；
背景：透明url（“数据：图像/svg+xml；基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，基本，重点，重点，重点，主要BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB0在Y41LDAUOTU1YUMDQ2LC0WLJGMY41LdiumDQ1IdauOTU1WLJK1NSAYLJA0NSWZLJGULTAUNSW2LJA0NCAYLJK1NSW3LJGY41LdQGNC45NTQSMY41ICIVC3ZNPG=”）中，50%不重复；
光标：指针；
大纲：0；
不透明度：0.5；
}
.select2-container.select2-allowclear.select2-choice缩写{
显示：内联块；
}
.select2容器。select2选项缩写：悬停{
/*背景位置：右-11px*/
不透明度：1；
光标：指针；
}
。选择2下拉式蒙版{
边界：0；
保证金：0；
填充：0；
位置：固定；
左：0；
排名：0；
最小高度：100%；
最小宽度：100%；
高度：自动；
宽度：自动；
不透明度：0；
z指数：9998；
/*IE工作所需的样式*/
背景色：#fff；
过滤器：alpha（不透明度=0）；
}
。选择2下拉菜单{
宽度：100%；
页边顶部：-1px；
位置：绝对位置；
z指数：9999；
最高：100%；
背景：#fafafa；
颜色：#000；
边框：1px实心#999；
边界顶部：0；
大纲：无；
-网络工具包盒阴影：0 3px 5px-2px#999999；
-moz盒阴影：0 3px 5px-2px#999999；
盒影：0 3px 5px-2px#999999；
/*
垫面：2.315rem；
最高保证金：-2.315雷姆；
*/
}
。选择2下拉自动宽度{
边框顶部：1px实心#aaa；
宽度：自动；
}
。选择2放置自动宽度。选择2搜索{
垫面：4px；
}
。选择2-drop。选择上面的2-drop{
/*页边顶部：1px*/
/*边框顶部：1px实心#aaa*/
/*边界底部：0*/
填充顶部：0；
边际上限：0；
保证金底部：-4.630雷姆；
垫底：2.315rem；
}
。选择2使其处于活动状态{
边框：1px实心#999；
边界顶部：无；
}
。选择2-drop。选择2-drop-up。选择2-drop-active{
边框顶部：1px实心#999；
}
.选择2容器。选择2选项。选择2箭头{
显示：无；
/*宽度：18px；
身高：100%；
位置：绝对位置；
右：0；
排名：0；
左边框：1px实心#aaa；
边界半径：0 4px 4px 0；
背景剪辑：填充框；
背景：#ccc；
背景图像：-webkit渐变（线性、左下、左上、颜色停止（0，#ccc）、颜色停止（0.6，#eee））；
背景图像：-webkit线性渐变（百分位）
jQuery(document).ready(function() {
    jQuery('.select2-results-dept-0').click(function() {
        alert("TEST TEST TEST");
    });
});

$('body').on('mouseenter', '.select2-results__option.select2-results__option--highlighted', function (e) {
                var data = $(this).data().data;
                var desc = "";
                if (data.description) {
                    desc = data.description;
                }
                if (desc != "") {
                    var t = $(this).tooltip({
                        title: desc,
                        placement: ($(window).width() < 1368 ? "bottom" : "right")
                    }).tooltip('show');
                }
            });
            $('body').on('mouseleave', '.select2-results__option.select2-results__option--highlighted', function (e) {
                $(".select2-results__option").tooltip('destroy');
            });

<select name="xxx" class="select-full" title="some_title">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select name="xxx2" class="select-full" title="another title">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<br/>
<br/>
<a href="#" class="tip-normal" title="this one works">hover me</a>

$('.tip-normal').tooltip({
    placement: "auto",
    html: true
});

$(".select-full").select2({
    width: "100%",
});

console.log($(".select2-container").length)
$(".select2-container").tooltip({
    title: function() {
        return $(this).prev().attr("title");
    },
    placement: "auto",
    //container: 'body'
});