1

私はChosen jQuery pluginを使用しています。
マウス ポインタがオプション上にあるときにツールチップを表示するにはどうすればよいですか?

更新: 私の主な質問は OPTION のツールチップに関するものであることに注意してください。「コンボボックス」全体ではありません。

4

4 に答える 4

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

私が思いついた最も簡単な解決策は、DOM の形式を変更する良い方法がないように思われるためtitle、元のタグの属性を尊重するように選択することでした。<option>

編集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 に答える