jquery - tooltip for each item in dynamically generated @html.dropdownfor control in mvc3 -

i'm working on web project in mvc 3 razor c#.

i have used @html.dropdownlistfor display item dynamically. want set tooltip every item of @html.dropdownlistfor.

my line of code below

@html.dropdownlistfor(m => m.type, new selectlist(model.types, "value", "text", model.type),  new { @class = "type"}) 

i felt curious question tried achieve it. created simple example , made work display different tooltip on each select item hover.

note: not expert in js side , not sure if ideal way.

here example code:

mycontroller.cs

    public actionresult loadcountries()     {         list<selectlistitem> li = new list<selectlistitem>();         li.add(new selectlistitem { text = "select", value = "0" });         li.add(new selectlistitem { text = "india", value = "1" });         li.add(new selectlistitem { text = "srilanka", value = "2" });         li.add(new selectlistitem { text = "china", value = "3" });         li.add(new selectlistitem { text = "austrila", value = "4" });         li.add(new selectlistitem { text = "usa", value = "5" });         li.add(new selectlistitem { text = "uk", value = "6" });         viewdata["country"] = li;         return view();     } 

loadcountries.cshtml

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="~/scripts/tooltipdefinition.js"></script>  @{     viewbag.title = "title"; }  <h2>just demo</h2>  @using (html.beginform()) {     @html.dropdownlist("countries", viewdata["country"] list<selectlistitem>) }  <h2 id="tooltipdata"></h2>  <script type="text/javascript">      $("#countries > option").each(function () {         var item = $(this).text();          if (item !== "select") {             var tooltiptext = mousehovertext(item);             $(this).attr("title", tooltiptext);         }     });  </script> 

tooltipdefinition.js

var mousehovertext = function(id) {     switch (id) {         case "india":             return "you have selected india - country full of opportunities.";         break;     case "srilanka":         return "you have selected srilanka - god's own country.";         break;     default:         return "you have selected " + id;     } }; 

i guess not doing different attempted. capturing select items , attaching title attribute when items loaded. tooltip text comes js file. may able pass through model.

sharing may suits need.