Question

我使用Chosen jQuery plugin 当鼠标指针在某个选项上时，如何显示工具提示？

更新：请注意，我的主要问题是关于OPTION的工具提示。不是整个“组合框”。

Answer 1

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Tooltip Combobox Stackoverflow</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(document).ready(function() { 
    $("select").each(function() { 
        var s = this; 
        for (i = 0; i < s.length; i++) 
            s.options[i].title = s.options[i].text; 
        if (s.selectedIndex > -1) 
            s.onmousemove = function() { s.title = s.options[s.selectedIndex].text; }; 
    }); 
});
</script>
</head>
<body>
<div class="ui-widget">
<label>Your preferred programming language: </label>
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>

</body>
</html>

Answer 2

我能想到的最简单的解决方案是选择尊重原始title标记上的<option>属性，因为似乎没有一种好方法可以改变DOM的格式。< / p>

修改chosen.jquery.js（版本1.0.0）：

第55行：将title添加到this.parsed数组：

html: option.innerHTML,
title: option.title,
selected: option.selected,

第253行：更新返回的<li>以包含标题：

return "<li title=\"" + option.title + "\" class=\"" + (classes.join(' ')) + "\"" + style + " data-option-array-index=\"" + option.array_index + "\">" + option.search_text + "</li>";

Answer 3

对于遇到这种情况的任何人来说，这是我如何在不修改选择的情况下完成的：

$('#yourid').on('chosen:showing_dropdown', function() {
    $('#yourid_chosen .chosen-results li').each(function() {
        var s = this;
        s.title = $(s).text();
    });
});

此方法使用Chris的想法，但将其包含在shows_dropdown事件中。

Answer 4

我一直在使用.on('mouseenter')和li选择器，它涵盖了在chose:showing_dripdown案例中没有发生的结果案例：

$('.select2-results').on('mouseenter','li',function(){$(this).prop('title','A tile')});

选择jQuery插件的每个选项的工具提示

4 个答案: