Show tooltip in your dropkick dropdowns

Dropkick is a good css library that can be used to make all dropdowns look and feel better for end users.

Normally dropkick 1.0 doesn't provide any property / function for adding a tooltip to each option for its select / dropdown menu. When the option gets longer, it is always better to have a title for each item.

To do so, we need to change the a bit of the dropkick js file and also to add a title attribute for the option in the select control.

Add a title to each item of your drop down control.

  dropdownlist.Items[i].Attributes.Add("title", dropdownlist.Items[i].Text);  

And change the dropdown.js file as below; [Search and replace the lines with below codes]

 // HTML template for dropdown options  
   optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}" title="{{ title }}">{{ text }}</a></li>',  

 oTemplate = oTemplate.replace('{{ title }}', view.options[i].title);  

And it will show you the tooltip as below;

The HTML generated for dropkick will have the title as;

 <li class="">  
 <a title="My record about title" data-dk-dropdown-value="26924">My record about title </a>  
 </li>  

If you apply a bootstrap, you will find even more cooler tooltips with dropkick...

Happy Coding...!