Adding the Tooltips will probably require some DOM manipulation - but it's certainly possible.
As an alternative option, why not use a Lookup Select Box instead and add the Hint field as a second label value.
It will be displayed in a format of Label | Hint in the Select Box.
Hi Geoffrey
Thanks for the reply ,
I configured the same way but its giving me the display like :
Its appending the hover/tooltip information with the label.
I needed On -Hover information.
Well then you will need to use DOM manipulation to rebuilt your choice list on the Client-side.
Disclaimer: DOM manipulation is not recommended because it may break in a future upgrade when the DOM changes.
For this example, I have a Choice List called City, that has tooltips about which Australian State it is the capital of.
First you need to load your Choice List data (with the tooltip info) when the form loads. Some people will use a GlideAjax call to retrieve the information from the server after the form loads. But I don't like the idea of making a server call immediately after information has just been loaded from the server. So my preferred method is to create a new Variable and load the data as its Default value. Then the data is loaded with the form, and no GlideAjax is required.
Create a Multi Line Text Variable. Set the Default Value to this script:
javascript: (function getChoiceList() {
var arr = [];
var choices = new GlideRecord('sys_choice');
choices.addQuery('name', 'u_custom_table');
choices.addQuery('element', 'u_city');
choices.addQuery('inactive', false);
choices.orderBy('sequence');
choices.query();
while (choices.next()) {
arr.push({
label:String(choices.label),
value:String(choices.value),
hint:String(choices.hint)
});
}
return JSON.stringify(arr);
})();
What you end up is a Variable that looks like this when the form loads:
Now you hide the Multi Line Text Variable with a UI Policy. You obviously don't want to see it.
Next, you create an onLoad Catalog Client Script.
function onLoad() {
var json = g_form.getValue('city_tooltips'); // Multi Line Text Variable
var choiceList = JSON.parse(json);
g_form.clearOptions('city'); // Remove the existing choice list
// Add the -- None -- option if needed, or set html to ''
var html = '<option value="" selected="selected">-- None --</option>';
var c;
// generate the html for the new choice list
for (var i = 0; i < choiceList.length; i++) {
c = choiceList[i];
html += '<option value="'+c.value+'" title="'+c.hint+'">'+c.label+'</option>';
}
g_form.getControl('city').innerHTML = html;
}
The added advantage of rebuilding the Choice List is that now it is ordered according to the Sequence of the sys_choice entries, whereas the original list isn't.
