1

我使用选择的jQuery 插件。
当鼠标指针位于某个选项上时，如何显示工具提示？

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

4

4 回答 4

1

对于遇到此问题的任何人，这是我在不修改选择的情况下所做的：

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

该方法使用了 Chris 的想法，但是将其包装在了showing_dropdown 事件中。

于 2014-11-26T19:55:07.580 回答
1

我一直在使用.on('mouseenter')li 选择器，它涵盖了在这种情况下不会发生的结果chose:showing_dripdown情况：

$('.select2-results').on('mouseenter','li',function(){$(this).prop('title','A tile')});
于 2015-05-18T12:20:29.330 回答
0 
<!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>
于 2013-09-25T20:27:18.517 回答
0

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

编辑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>";
于 2013-12-27T17:38:44.993 回答