使用 jQuery 或 Javascript 將提示功能添加到 select2 下拉列表？

Question

所以我在一個字段中有一個下拉功能，我想在我將鼠標懸停在一個選項上時添加一個工具提示彈出窗口，並且有多個選項。 我希望工具提示顯示該選項內容（即“你好”、“問候”等）。 此外，當我將鼠標懸停在一個選項上時，它會添加一個額外的類“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>

下面是我看到的我想要發生的示例的代碼片段。 但是，我對使用哪個類感到困惑。 這是我到目前為止所得到的。 我在那里發出警報，以確保我做得對。

jQuery(document).ready(function() {
    jQuery('.select2-results-dept-0').click(function() {
        alert("TEST TEST TEST");
    });
});

下面是我看到的一個例子，我一直在嘗試實施。

 $('.uitip').tooltip();

 <div> <h4>Default behaviours</h4> <select> <option title=""></option> <option title="1">1</option> <option title="2">2</option> <option title="3">3</option> <option title="4">4</option> </select> <select multiple> <option title=""></option> <option title="1">1</option> <option title="2">2</option> <option title="3">3</option> <option title="4">4</option> </select> </div> <div> <h4 class='uitip' title='Tests with jQuery UI Tooltips applied'>jQuery UI tooltips</h4> <select class='uitip' title='has tooltips'> <option title=""></option> <option title="1">1</option> <option title="2">2</option> <option title="3">3</option> <option title="4">4</option> </select> <select multiple class='uitip' title='has tooltips'> <option title=""></option> <option title="1">1</option> <option title="2">2</option> <option title="3">3</option> <option title="4">4</option> </select> </div>

任何幫助，將不勝感激！ 謝謝！

Answer 1

 $(".select2-result-selectable").on("mouseover", function(event){ $(".tooltip").html(event.target.innerHTML); $(".tooltip").css({"display":"block", "left": (event.clientX+5)+"px", "top": (event.clientY+5)+"px"}); }); $(".select2-result-selectable").on("mouseout", function(event){ $(".tooltip").css("display", "none"); });

 /* Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 */ .select2-container { margin: 0 0 1rem 0; position: relative; vertical-align: middle; font-family: inherit; -webkit-appearance: none !important; font-size: 0.875rem; background: #fafafa url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgMTYgMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+DQo=") no-repeat; background-position-x: 100%; background-position-y: center; } .select2-container:hover { background-color: #f2f2f2; border-color: #999; } .error .select2-container { margin-bottom: 0; } .select2-container, .select2-drop, .select2-search, .select2-search input { /* Force border-box so that % widths fit the parent container without overlap because of margin/padding. More Info : http://www.quirksmode.org/css/box.html */ -webkit-box-sizing: border-box; /* webkit */ -moz-box-sizing: border-box; /* firefox */ box-sizing: border-box; /* css3 */ } .select2-container .select2-choice { display: block; overflow: hidden; position: relative; height: 2.315rem; border: 1px solid #ccc; padding: 0.5rem 1rem 0.5rem 0.5rem; white-space: nowrap; line-height: 1.3125rem; color: inherit; text-decoration: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select2-container.select2-drop-above .select2-choice { /*border-bottom-color: #aaa;*/ } .select2-container.select2-allowclear .select2-choice .select2-chosen { margin-right: 42px; } .select2-container .select2-choice > .select2-chosen { margin-right: 1rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .select2-container .select2-choice abbr { display: none; width: 9px; height: 9px; position: absolute; right: 24px; top: 13px; font-size: 1px; text-decoration: none; border: 0; background: transparent url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjlweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9Ii0xIC0xIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAtMSA5IDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNy41LDAuOTU1IDYuMDQ2LC0wLjUgMy41LDIuMDQ1IDAuOTU1LC0wLjUgLTAuNSwwLjk1NSAyLjA0NSwzLjUgLTAuNSw2LjA0NCAwLjk1NSw3LjUgMy41LDQuOTU0IDYuMDQ2LDcuNSA3LjUsNi4wNDQgNC45NTQsMy41ICIvPjwvc3ZnPg==") 50% 50% no-repeat; cursor: pointer; outline: 0; opacity: 0.5; } .select2-container.select2-allowclear .select2-choice abbr { display: inline-block; } .select2-container .select2-choice abbr:hover { /*background-position: right -11px;*/ opacity: 1; cursor: pointer; } .select2-drop-mask { border: 0; margin: 0; padding: 0; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 9998; /* styles required for IE to work */ background-color: #fff; filter: alpha(opacity=0); } .select2-drop { width: 100%; margin-top: -1px; position: absolute; z-index: 9999; top: 100%; background: #fafafa; color: #000; border: 1px solid #999; border-top: 0; outline: none; -webkit-box-shadow: 0 3px 5px -2px #999999; -moz-box-shadow: 0 3px 5px -2px #999999; box-shadow: 0 3px 5px -2px #999999; /* padding-top: 2.315rem; margin-top: -2.315rem; */ } .select2-drop-auto-width { border-top: 1px solid #aaa; width: auto; } .select2-drop-auto-width .select2-search { padding-top: 4px; } .select2-drop.select2-drop-above { /*margin-top: 1px;*/ /*border-top: 1px solid #aaa;*/ /*border-bottom: 0;*/ padding-top: 0; margin-top: 0; margin-bottom: -4.630rem; padding-bottom: 2.315rem; } .select2-drop-active { border: 1px solid #999; border-top: none; } .select2-drop.select2-drop-above.select2-drop-active { border-top: 1px solid #999; } .select2-container .select2-choice .select2-arrow { display: none; /* width: 18px; height: 100%; position: absolute; right: 0; top: 0; border-left: 1px solid #aaa; border-radius: 0 4px 4px 0; background-clip: padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); background-image: linear-gradient(top, #ccc 0%, #eee 60%); */} .select2-container .select2-choice .select2-arrow b { display: block; width: 100%; height: 100%; background: url('select2.png') no-repeat 0 1px; } .select2-search { display: inline-block; width: 100%; min-height: 26px; margin: 0; padding-left: 4px; padding-right: 4px; position: relative; /*z-index: 10000;*/ white-space: nowrap; } .select2-search input { width: 100%; height: auto !important; min-height: 26px; padding: 4px 20px 4px 5px; margin: 0; outline: 0; font-family: sans-serif; /*font-size: 1em;*/ border: 1px solid #aaa; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; background: #fff url('select2.png') no-repeat 100% -22px; /* background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%); */} .select2-drop.select2-drop-above .select2-search input { margin-top: 4px; } .select2-search input.select2-active { background: #fff url('select2-spinner.gif') no-repeat 100%; /* background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%); */} .select2-container-active .select2-choice, .select2-container-active .select2-choices { border: 1px solid #999; outline: none; -webkit-box-shadow: 0 0 5px #999; -moz-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; } .select2-dropdown-open .select2-choice { /*border-bottom-color: transparent;*/ border-bottom-width: 0; background: #fafafa; /*z-index: 10000;*/ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices { /*border: 1px solid #999;*/ border-top-color: #ccc; border-bottom-width: 1px; } .select2-dropdown-open .select2-choice .select2-arrow { background: transparent; border-left: none; filter: none; } .select2-dropdown-open .select2-choice .select2-arrow b { background-position: -18px 1px; } /* results */ .select2-results { max-height: 200px; padding: 0 0.25rem; margin: 0.25rem 0; position: relative; overflow-x: hidden; overflow-y: auto; font-size: 0.875rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .select2-results ul.select2-result-sub { margin: 0; padding-left: 0; } .select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } .select2-results li { list-style: none; display: list-item; background-image: none; } .select2-results li.select2-result-with-children > .select2-result-label { font-weight: bold; } .select2-results .select2-result-label { padding: 0.25rem; margin: 0; cursor: pointer; min-height: 1em; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select2-results .select2-highlighted { background: #3875d7; color: #fff; } .select2-results li em { background: #feffde; font-style: normal; } .select2-results .select2-highlighted em { background: transparent; } .select2-results .select2-highlighted ul { background: #fff; color: #000; } .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { background: transparent; display: list-item; padding: 0.25rem; color: #999; font-style: italic; } /* disabled look for disabled choices in the results dropdown */ .select2-results .select2-disabled.select2-highlighted { color: #666; background: #eee; display: list-item; cursor: default; } .select2-results .select2-disabled { background: #eee; display: list-item; cursor: default; } .select2-results .select2-selected { display: none; } .select2-more-results.select2-active { background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; } .select2-more-results { background: #f4f4f4; display: list-item; } /* disabled styles */ .select2-container.select2-container-disabled .select2-choice { background-color: #eee; background-image: none; border: 1px solid #ddd; cursor: default; } .select2-container.select2-container-disabled .select2-choice .select2-arrow { background-color: #eee; background-image: none; border-left: 0; } .select2-container.select2-container-disabled .select2-choice abbr { display: none; } /* multiselect */ .select2-container-multi .select2-choices { height: auto !important; height: 1%; margin: 0; padding: 0; position: relative; font-size: 0.875rem; cursor: text; overflow: hidden; background-color: #fafafa; border: 1px solid #ccc; } .select2-locked { padding: 3px 5px 3px 5px !important; } .select2-container-multi.select2-container-active .select2-choices { border: 1px solid #999; outline: none; -webkit-box-shadow: 0 0 5px #999; -moz-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; } .select2-container-multi.select2-container-active.select2-dropdown-open .select2-choices { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .select2-container-multi .select2-choices li { float: left; list-style: none; } .select2-container-multi .select2-choices .select2-search-field { margin: 0; padding: 0; white-space: nowrap; } .select2-container-multi .select2-choices .select2-search-field input { padding: 5px; margin: 1px 0; font-family: sans-serif; font-size: 100%; color: #666; outline: 0; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: transparent !important; } .select2-container-multi .select2-choices .select2-search-field input.select2-active { background: #fff url('select2-spinner.gif') no-repeat 100% !important; } .select2-default { color: #999 !important; } .select2-container-multi .select2-choices .select2-search-choice { padding: .1875rem .5rem .1875rem 1.25rem; margin: .25rem 0 0 .25rem; position: relative; line-height: 1.5rem; color: #333; cursor: default; background-color: #ddd; background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select2-container-multi .select2-choices .select2-search-choice .select2-chosen { cursor: default; } .select2-container-multi .select2-choices .select2-search-choice-focus { background: #d4d4d4; } .select2-search-choice-close { display: inline-block; width: 0.75rem; height: 0.75rem; position: absolute; right: .25rem; top: .5rem; font-size: 1px; outline: none; background: transparent url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjlweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9Ii0xIC0xIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAtMSA5IDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNy41LDAuOTU1IDYuMDQ2LC0wLjUgMy41LDIuMDQ1IDAuOTU1LC0wLjUgLTAuNSwwLjk1NSAyLjA0NSwzLjUgLTAuNSw2LjA0NCAwLjk1NSw3LjUgMy41LDQuOTU0IDYuMDQ2LDcuNSA3LjUsNi4wNDQgNC45NTQsMy41ICIvPjwvc3ZnPg==") 50% 50% no-repeat; opacity: 0.5; } .select2-container-multi .select2-search-choice-close { left: .25rem; } .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { opacity: 1; } .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { /*background-position: right -11px;*/ } /* disabled styles */ .select2-container-multi.select2-container-disabled .select2-choices { background-color: #eee; background-image: none; border: 1px solid #ddd; cursor: default; } .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { padding: 3px 5px 3px 5px; border: 1px solid #ddd; background-image: none; background-color: #eee; } .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; background: none; } /* end multiselect */ .select2-result-selectable .select2-match, .select2-result-unselectable .select2-match { text-decoration: underline; } .select2-offscreen, .select2-offscreen:focus { clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; border: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: absolute !important; outline: 0 !important; left: 0px !important; top: 0px !important; } .select2-display-none { display: none; } .select2-measure-scrollbar { position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; overflow: scroll; } /* Retina-ize icons */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b { background-image: url('select2x2.png') !important; background-repeat: no-repeat !important; background-size: 60px 40px !important; } .select2-search input { background-position: 100% -21px !important; } } .tooltip{ border: 1px solid red; position: absolute; z-index: 99999; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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: 0px; left: 0px;"> <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> <div class='tooltip'></div>

希望這對你有用......如果沒有要求更多。

Answer 2

這是我的項目的解決方案

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

Answer 3

https://jsfiddle.net/8odneso7/2/這也很好用，看起來不錯，這是我在那里找到的代碼：

HTML：

<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>

JS（jQuery 3.4）：

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