Tips to Add Tooltip to Select2

How to add tooltip in select2

When selected text is long in select2, then it does not show the full text. So, it is very difficult to understand what is selected.

For the above problem we can solve it easily. In the select2 plug-in constructor there are  two call-back function parameters – formatSelection and formatResult that can be used to render the current selection and the result. These methods can return either a HTML string, a DOM element, or a jQuery object that renders the selection. So, in the following way we can fix the issue-

textFormat: function (item) {
  var itemText = item.text;
  return '<div title="' + itemText + '">' + itemText + '</div>';
},

in the select2 constructor-

formatResult: textFormat,
formatSelection: textFormat,

More about select2

You May Also Like

About the Author: Md. Delwar Hossain

He has 11 years of experience in developing standalone software and web applications for multiple database platforms. He has been passionate about new tools and technologies. He is positive and trustworthy. He is capable to learn and adapt quickly to different situations. He is a great team player and enjoys leading and mentoring. He is specialized in architecting and building complex web and mobile application. He has strong skills to automate POS, inventory, supply chain, trading export/ import, human resource management, manufacturing and production, distribution management system and hospital management system.

Leave a Reply

Your email address will not be published. Required fields are marked *