Wednesday, March 25, 2009

JQuery Tooltip for Html Select Boxes

Sometimes there is limited content width for options showing up in an HTML Select tag. Consider using in those cases JQuery Tooltip plugin:

<!-- Include jquery and tooltip plugin -->
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>

<!-- Forcing a narrow select box -->
<style type="text/css">
select{
width: 60;
}
option{
width: 60;
}
</style>

<!-- Include custom code to handle the tooltip -->
<script type="text/javascript">
//After loading the page insert the title attribute.
$(function(){
$("select option").attr( "title", "" );
$("select option").each(function(i){
this.title = this.text;
})
});

//Attach a tooltip to select elements
$("select").tooltip({
left: 25
});
</script>

<!-- When moving the mouse over the below options -->
<select>
<option>very long option text 1</option>
<option>very long option text 2</option>
<option>very long option text 3</option>
<option>very long option text 4</option>
<option>very long option text 5</option>
<option>very long option text 6</option>
</select>

5 comments:

MxRBlind said...

I tried this on IE 6, but the tooltips doesn't come up! any ideas?

Nitin Gautam said...

Not working in IE6 and not in Firefox

Nestor Urquiza said...

It does not work for IE6 since IE6 select boxes are tied to Windows native libraries. Just google it.

It does work on Firefox.

The way I see it is that a tooltip is not a stopper for your app to be used or not. It is a nice feature and so if a user wants the nice feature s(he) can always upgrade the browser. If not the basic application functionality will still work which is the important part.

Thanks for commenting,

-Nestor

Marc said...

Hmm. Sometimes it's not so simple.

I have a client with 30,000 desktops, most of which aren't even on XP yet. Updating the browser is not a trivial matter.

(I'm guessing they'll skip Vista and go straight to Win7- probably about 2012).

Kevin said...

Many thanks for this. This is EXACTLY what I needed. Elegant and simple. jQuery to the rescue AGAIN!

Followers