Tooltips for each option of Chosen jQuery plugin

问题

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

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/19013844/tooltips-for-each-option-of-chosen-jquery-plugin

标签

events

jquery-plugins

jquery-chosen