使用Dojo在将鼠标悬停在动态下拉菜单上时添加工具提示

Question

Hi I want to do something like this data is coming from servlet in form of JSON after Iterating dropdown is getting created. JSON IS :

JSON = [{"attr_name":"ClaimId","attr_type":"String"},{"attr_name":"creationDate","attr_type":"String"},{"attr_name":"DocumentType","attr_type":"String"},{"attr_name":"object_name","attr_type":"String"},{"attr_name":"PolicyNumber","attr_type":"Integer"},{"attr_name":"UserID","attr_type":"String"}]

Whenever onmouseover is done over list I want to show attr_type as TOOL Tip. onmouseout it should go away.

extMetaCombo = dijit.byId('ext_prof_metadata');



          extMetaCombo.options.length = 0;
          extMetaCombo.addOption({label:'Select', value:'Select'});

          for(var i = 0; i < response.length; i++)
              {
                var attr_name = response[i].attr_name;
                if(attr_name != null)
                    {
                    extMetaCombo.addOption({label:attr_name, value:attr_name});
                    }
              }

        }
          return response;

Hope the question is enough for understanding. Thanks in advannce

Answer 1

If you set your Select control's labelType to something other than 'text', eg 'html', then you can pass HTML into your label:

var selectBox = new Select({
    labelType: 'html'
});
array.forEach(yourJsonArray, function(option) {
    selectBox.addOption({
        label: '<span title="' + option.attr_name + '">' + option.attr_name +  '</span>',
        value: option.attr_name
    });
});