<!-- 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>
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:
Subscribe to:
Post Comments (Atom)
5 comments:
I tried this on IE 6, but the tooltips doesn't come up! any ideas?
Not working in IE6 and not in Firefox
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
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).
Many thanks for this. This is EXACTLY what I needed. Elegant and simple. jQuery to the rescue AGAIN!
Post a Comment