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

Challenge 1:

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

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.

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

1 Include required files:

<script type="text/javascript" src="
<script type="text/javascript" src="inc/jquery.timers.js"></script>

<script type="text/javascript" src="inc/jquery.dropshadow.js"></script>

<script type="text/javascript" src="inc/mbTooltip.js"></script>

<link rel="stylesheet" type="text/css" href="css/mbTooltip.css" title="style1"  media="screen">

How to show tooltip on the selected item:

//Code for enabling tooltip
             $("#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
                 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.

Comments (0)

Skip to main content