Tooltips for each option of Chosen jQuery plugin

2019-08-07 01:01发布

站内问答 / 前端开发
1356 4 6

I use Chosen jQuery plugin.
How can I show a tooltip when the mouse pointer is on some option?

UPDATED: Please notice, that my main question is about a tooltip for an OPTION. Not for whole "combobox".

4条回答
劫难
2楼-- · 2019-08-07 01:33 
<!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>
查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2019-08-07 01:37

Easiest solution I could come up with was to make chosen respect the title attribute on original <option> tags because there doesn't seem to be a good way to alter the format of the DOM.

Edit chosen.jquery.js (version 1.0.0):

Around line 55: add the title to the this.parsed array:

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

Around line 253: update the returned <li> to include a title:

return "<li title=\"" + option.title + "\" class=\"" + (classes.join(' ')) + "\"" + style + " data-option-array-index=\"" + option.array_index + "\">" + option.search_text + "</li>";
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-08-07 01:37

I've been using .on('mouseenter') with li selector, it covers the results case which doesn't happens in the chose:showing_dripdown case:

$('.select2-results').on('mouseenter','li',function(){$(this).prop('title','A tile')});
查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
5楼-- · 2019-08-07 01:46

For anyone who comes across this, here's how I did it without modifying chosen:

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

This method uses Chris's idea, but wraps it in the showing_dropdown event.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)