Monday, October 27, 2014

How to add a tooltip to a SharePoint choice field - the jQuery way

How to add a tooltip to a choice field on a SharePoint list EditForm or NewForm - the jQuery way

In this post I will explain how to add a tooltip to a choice field on a list EditForm or NewForm page. You should already know that in a list EditForm/NewForm page, we cannot display a different tooltip for each SharePoint OOTB choice field item:

Let say that you have named your choice field ChoiceWithTooltip. The idea is to add an HTML select element on the EditForm or NewForm page, which will contain the tooltips that will be displayed on each ChoiceWithTooltip item at runtime. Let me explain:

1-      Open the EditForm or NewForm page in SharePoint Designer, or edit the page on the SharePoint vanilla interface and add a Content Editor Web Part.
2-      Add a div that will contain the following sections:

a-      An HTML select element that has the id selTooltip, in which we will add an option for each ChoiceWithTooltip choice option. The value attribute will have the same value as the ChoiceWithTooltip choice option. The title attribute will contain the tooltip that we want to display on the corresponding choice field.

b-      A jQuery script that will add each selTooltip option title to its corresponding ChoiceWithTooltip choice option.

<div style="display:none">
   <select id="selTooltip">
      <option value="choice 1" title="tooltip1"></option>
      <option value="choice 2" title="tooltip2"></option>
      <option value="choice 3" title="tooltip3"></option>
   <script type="text/javascript">
      $(document).ready(function() {
         $("select[title*='ChoiceWithTooltip'] option").each(function() {
            $(this).attr('title', $("#selTooltip option[value='" + $(this).attr('value') + "']").attr('title'));

Et Voila…