使用 dojo 在鼠标悬停在动态下拉列表 select 上添加工具提示

Question

嗨，我想做一些事情，比如在创建迭代下拉列表后，数据来自 servlet，格式为 JSON。 JSON 是：

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"}]

每当在列表上完成 onmouseover 时，我想将 attr_type 显示为工具提示。 onmouseout 它应该消失。

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;

希望问题足够理解。提前致谢

Answer 1

如果您将 Select 控件的 labelType 设置为 'text' 以外的其他内容，例如'html'，然后你可以将 HTML 传递到你的标签中：

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
    });
});

使用 dojo 在鼠标悬停在动态下拉列表 select 上添加工具提示

Adding tooltip on mouseover over dynamic dropdown select using dojo

javascript

dojo