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

AlifShaikh · ‎07-11-2018

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);
option.appendChild(txt);
option.setAttribute("label", arr);
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.

RobertScheitlin__GISP · ‎07-12-2018

Alif,

Here is a working sample.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Tooltip on Select Items</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">

    <script src="https://js.arcgis.com/3.25/"></script>
    <script>
      require([
        "dojo/parser",
        "dijit/registry",
        "dijit/form/Select",
        "dojo/domReady!"
      ], function (parser, registry) {
          parser.parse();
          var ddl = registry.byId("stateSelect");

          var options = [];
          var 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++) {
            val = arr[i];
            var option = {
              value: val,
              label: '<span title="blah">' + val +  '</span>',
            };
            options.push(option);
            if (i === 0) {
              options[i].selected = true;
            }
          }
          ddl.addOption(options);
      });
    </script>
  </head>

  <body class="claro">
    <select id="stateSelect" data-dojo-type="dijit/form/Select">
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎07-12-2018

Alif,

Here is a working sample.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Tooltip on Select Items</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">

    <script src="https://js.arcgis.com/3.25/"></script>
    <script>
      require([
        "dojo/parser",
        "dijit/registry",
        "dijit/form/Select",
        "dojo/domReady!"
      ], function (parser, registry) {
          parser.parse();
          var ddl = registry.byId("stateSelect");

          var options = [];
          var 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++) {
            val = arr[i];
            var option = {
              value: val,
              label: '<span title="blah">' + val +  '</span>',
            };
            options.push(option);
            if (i === 0) {
              options[i].selected = true;
            }
          }
          ddl.addOption(options);
      });
    </script>
  </head>

  <body class="claro">
    <select id="stateSelect" data-dojo-type="dijit/form/Select">
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AlifShaikh · ‎07-12-2018

Hi Robert,

Thanks for the code.

However,the code displays tooltip for only the first item in the array (arr[0]) I want the tooltip to be added to every item in the array with its corresponding value.

label: '<span title="blah">' + val +  '</span>', // where the Title tag should be value of 
the hovered item in the array

I have modified a bit see below.

 var option = {
              value: val,
              label: '<span onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">' + val +  '</span>',
            };
            options.push(option);           
          }
          ddl.addOption(options);            
      });
                    function showTooltip(el) {
                    dijit.showTooltip(el.getAttribute('tooltip'), el);          
                }

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

But, I am not able to set the title attribute of the span to the value of the hoevered element in the list. Any help would be greatly appreciated.

Thanks

RobertScheitlin__GISP · ‎07-13-2018

Alif,

So just change line 27 in my sample to this and you are good to go.

label: '<span title="'+ val +'">' + val +  '</span>',‍

There is NO need whatsoever to have the mouseover and mouseout.

AlifShaikh · ‎07-15-2018

Hi Robert,

Thanks for the sample. that worked.

Regards,

Alif