ASP.NET MVC - Creating a Single Select List box and showing tooltip for lengthy items

Article
06/14/2010

Challenge 1:

Even when you set multiple = false the list box still ends up as <select multiple>... in the resulting HTML.

https://stackoverflow.com/questions/351483/how-do-i-create-a-listbox-in-asp-net-mvc-with-single-selection-mode

Here is how I created a list box that allows only single selection:

<%= Html.DropDownList("lstStates", Model.USStates, new {@size="40", @tabindex = "2", @style = "width: 500px; height:300px" })%>

Challenge 2:

I was using cluetip() plugin but I couldn’t get it working on the select control. Then I landed at jquery.mb.tooltip.1.6 which is excellent plugin to show the tooltip. https://pupunzi.open-lab.com/2009/02/07/mbtooltip

Very easy to use and it also works with the Select tag. Following are the steps:

1 Include required files:

How to show tooltip on the selected item:

//Code for enabling tooltip
       $("#lstStates").change(function(){
             $("#lstStates :selected").attr("title",$("#lstStates :selected").attr("text") );
       });
       $("#lstStates : selected").mbTooltip({ // also $([domElement]).mbTooltip >> in this case only children element are involved
                 opacity : .97,       //opacity
                 wait:100,           //before show
                 cssClass:"default", // default = default
                 timePerWord:70,      //time to show in milliseconds per word
                 hasArrow:false,            // if you whant a little arrow on the corner
                 hasShadow:true,
                 imgPath:"images/",
                 ancor:"mouse",    //"parent" you can ancor the tooltip to the mouse position or at the bottom of the element
                 shadowColor:"black", //the color of the shadow
                 mb_fade:200 //the time to fade-in
       });
       //end of code for enabling tooltip.

ASP.NET MVC - Creating a Single Select List box and showing tooltip for lengthy items

Additional resources