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>
</select>
<script
type="text/javascript">
$(document).ready(function() {
$("select[title*='ChoiceWithTooltip']
option").each(function() {
$(this).attr('title',
$("#selTooltip option[value='" + $(this).attr('value') +
"']").attr('title'));
});
});
</script>
</div>
|
Et Voila…
