JSFiddle - React, Tailwind, and code Playground
HTML
<span class="tooltip" title="some title for your tooltip"><select>
<option>Something</option>
<option>Something Else</option>
</select>
</span>
CSS
.tooltip { position: relative; top: 2em; }
.tooltip:hover:after {
position: relative;
content: "" attr(title) "";
border: 1px dashed black;
top: -1.5em;
left: 12em;
padding: 0.5em;
}
div.chzn-container {
font-size: 13px;
position: relative;
}
div.chzn-container input {
background: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
margin: 0px;
padding: 4px 5px;
outline: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
div.chzn-container textarea:focus {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
div.chzn-container div.chzn-drop {
background: #FFF;
border: 1px solid #aaa;
border-width: 0 1px 1px;
left: 0;
position: absolute;
top: 29px;
-webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
z-index: 20;
}
div.chzn-container-single div.chzn-drop {
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-khtml-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/* SINGLE */
div.chzn-container a.chzn-single {
background: #FFF;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 50%);
border: 1px solid #aaa;
display: block;
...
JavaScript
(function() {
/*
Chosen, a Select Box Enhancer for jQuery and Protoype
by Patrick Filler for Harvest, http://getharvest.com
Available for use under the MIT License, http://en.wikipedia.org/wiki/MIT_License
Copyright (c) 2011 by Harvest
*/ var $, Chosen, SelectParser, get_side_border_padding, root;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
root = typeof exports !== "undefined" && exports !== null ? exports : this;
$ = jQuery;
$.fn.extend({
chosen: function(data, options) {
return $(this).each(function(input_field) {
if (!($(this)).hasClass("chzn-done")) {
return new Chosen(this, data, options);
}
});
}
});
Chosen = (function() {
function Chosen(elmn) {
this.set_default_values();
this.form_field = elmn;
this.form_field_jq = $(this.form_field);
this.is_multiple = this.form_field.multiple;
this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option";
this.set_up_html();
this.register_observers();
this.form_field_jq.addClass("chzn-done");
}
Chosen.prototype.set_default_values = function() {
this.click_test_action = __bind(function(evt) {
return this.test_active_click(evt);
}, this);
this.active_field = false;
this.mouse_on_container = false;
this.results_showing = false;
this.result_highlighted = null;
this.result_single_selected = null;
return this.choices = 0;
};
Chosen.prototype.set_up_html = function() {
var container_div, dd_top, dd_width, sf_width;
this.container_id = this.form_field.id.replace('.', '_') + "_chzn";
/* Calculate the selectbox's width based on the options and optgroups,
because firefox on os/x lies about this when asked for it.
*/
var max = max = this.form_field_jq.width();
$($(this.form_field).children()).each(function(){
...