AnsweredAssumed Answered

How to add Tooltip for each option of a select tag?

Question asked by alifJordan on Jul 11, 2018
Latest reply on Jul 15, 2018 by alifJordan

I am working with ArcGIS JS API and the dijit.form.Select.

I have this below code.

 

var ddl = document.getElementById("stateSelect"),
arr = ["I just created new DropDown and added tooltip code.", "css", "java", "javascript", "php", "c++", "node.js", "ASP", "JSP", "SQL"];

for (var i = 0; i < arr.length; i++) {
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("label", arr[i]);
option.setAttribute("value", '<div tooltip="Bar Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">Barrrrrrrrrrrrrrrrrrrrrrr</div>');
ddl.insertBefore(option, ddl.lastChild);
}

 

function showTooltip(el) {
dijit.showTooltip(el.getAttribute('tooltip'), el);
}

function hideTooltip(el) {
dijit.hideTooltip(el);
}

 

My question is how do I pass HTML tag in option.setAttribute and how to make the </div> value to be same as arr[i]. 

Outcomes