Add tooltip to sourcesMenu item (Search widget)

954
2
Jump to solution
07-14-2016 11:18 AM
LauraMiles1
Occasional Contributor III

The search widget has a dropdown for the user to pick a source to search from. Once the source has been picked, the searchInput textbox is activated - in Internet Explorer, this removes any placeholder text. I'm finding users aren't sure which fields in a particular source are searchable, so in the placeholder text I've added descriptions (ie. "Type tenant name, lot ID"). This works great for Chrome but most of our users use IE. If I could add a title when the user hovers on each source in the dropdown menu, that would be great - but I'm having trouble. The search widget puts all my sources into an unordered list, the html output looks like this:

<div data-dojo-attach-point="sourcesNode" class="searchMenu sourcesMenu">

     <ul role="menu">

          <li data-index="0" role="menuitem" class="active" tabindex="0">Address</li>

          <li data-index="1" role="menuitem" class="" tabindex="0">Agreement</li>

          <li data-index="2" role="menuitem" class="" tabindex="0">Assets</li>

          <li data-index="3" role="menuitem" class="" tabindex="0">Lots</li>

          <li data-index="4" role="menuitem" class="" tabindex="0">Marine Reaches</li>

          <li data-index="5" role="menuitem" class="" tabindex="0">Marine Terminals</li>

          <li data-index="6" role="menuitem" class="" tabindex="0">Risk Rating</li>

     </ul>

</div>

I would think I could use some jquery, such as this, to access each <li> element and add a title:

$( "ul li:nth-child(0)" ).attr('title', 'Type an address or intersection');

$( "ul li:nth-child(1)" ).attr('title', 'Type a tenant name or lot ID');

etc.

This works for a simple html page (jsfiddle) but it's not working in my map. Something must be interacting with it but I'm not sure what...any ideas?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Laura,

Here is a sample that demos your request:

<!DOCTYPE html>

<html dir="ltr">

<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>ArcGIS API for JavaScript | Search widget with multiple sources</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <style>

        html,

        body,

        #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        #search {

            display: block;

            position: absolute;

            z-index: 2;

            top: 20px;

            left: 74px;

        }

    </style>

    </script>

    <script src="https://js.arcgis.com/3.17/"></script>

    <script>

        require([

            "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/query", "dojo/dom-attr", "dojo/domReady!"

        ], function(Map, Search, FeatureLayer, InfoTemplate, query, domAttr) {

            var map = new Map("map", {

                basemap: "gray",

                center: [-97, 38], // lon, lat

                zoom: 5

            });

            var search = new Search({

                enableButtonMode: false, //this enables the search widget to display as a single button

                enableLabel: false,

                enableInfoWindow: true,

                showInfoWindowOnSelect: false,

                map: map

            }, "search");

            var sources = search.get("sources");

            //Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name.

            sources.push({

                featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ..."),

                searchFields: ["DISTRICTID"],

                displayField: "DISTRICTID",

                exactMatch: false,

                outFields: ["DISTRICTID", "NAME", "PARTY"],

                name: "Congressional Districts",

                placeholder: "3708",

                maxResults: 6,

                maxSuggestions: 6,

                //Create an InfoTemplate and include three fields

                infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"),

                enableSuggestions: true,

                minCharacters: 0

            });

            sources.push({

                featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),

                searchFields: ["Name"],

                displayField: "Name",

                exactMatch: false,

                name: "Senator",

                outFields: ["*"],

                placeholder: "Senator name",

                maxResults: 6,

                maxSuggestions: 6,

                //Create an InfoTemplate

                infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"),

                enableSuggestions: true,

                minCharacters: 0

            });

            //Set the sources above to the search widget

            search.set("sources", sources);

            search.startup();

            query(".searchMenu.sourcesMenu>ul>li").forEach(function(node, index) {

                switch (index) {

                    case 0:

                        domAttr.set(node, "title", "All Source tooltip");

                        break;

                    case 1:

                        domAttr.set(node, "title", "ESRI World Geocoder tooltip");

                        break;

                    case 2:

                        domAttr.set(node, "title", "Congressional Districts tooltip");

                        break;

                    case 3:

                        domAttr.set(node, "title", "Senator tooltip");

                        break;

                }

            })

        });

    </script>

</head>

<body>

    <div id="search"></div>

    <div id="map"></div>

</body>

</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Laura,

Here is a sample that demos your request:

<!DOCTYPE html>

<html dir="ltr">

<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>ArcGIS API for JavaScript | Search widget with multiple sources</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <style>

        html,

        body,

        #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        #search {

            display: block;

            position: absolute;

            z-index: 2;

            top: 20px;

            left: 74px;

        }

    </style>

    </script>

    <script src="https://js.arcgis.com/3.17/"></script>

    <script>

        require([

            "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/query", "dojo/dom-attr", "dojo/domReady!"

        ], function(Map, Search, FeatureLayer, InfoTemplate, query, domAttr) {

            var map = new Map("map", {

                basemap: "gray",

                center: [-97, 38], // lon, lat

                zoom: 5

            });

            var search = new Search({

                enableButtonMode: false, //this enables the search widget to display as a single button

                enableLabel: false,

                enableInfoWindow: true,

                showInfoWindowOnSelect: false,

                map: map

            }, "search");

            var sources = search.get("sources");

            //Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name.

            sources.push({

                featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ..."),

                searchFields: ["DISTRICTID"],

                displayField: "DISTRICTID",

                exactMatch: false,

                outFields: ["DISTRICTID", "NAME", "PARTY"],

                name: "Congressional Districts",

                placeholder: "3708",

                maxResults: 6,

                maxSuggestions: 6,

                //Create an InfoTemplate and include three fields

                infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"),

                enableSuggestions: true,

                minCharacters: 0

            });

            sources.push({

                featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),

                searchFields: ["Name"],

                displayField: "Name",

                exactMatch: false,

                name: "Senator",

                outFields: ["*"],

                placeholder: "Senator name",

                maxResults: 6,

                maxSuggestions: 6,

                //Create an InfoTemplate

                infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"),

                enableSuggestions: true,

                minCharacters: 0

            });

            //Set the sources above to the search widget

            search.set("sources", sources);

            search.startup();

            query(".searchMenu.sourcesMenu>ul>li").forEach(function(node, index) {

                switch (index) {

                    case 0:

                        domAttr.set(node, "title", "All Source tooltip");

                        break;

                    case 1:

                        domAttr.set(node, "title", "ESRI World Geocoder tooltip");

                        break;

                    case 2:

                        domAttr.set(node, "title", "Congressional Districts tooltip");

                        break;

                    case 3:

                        domAttr.set(node, "title", "Senator tooltip");

                        break;

                }

            })

        });

    </script>

</head>

<body>

    <div id="search"></div>

    <div id="map"></div>

</body>

</html>

View solution in original post

LauraMiles1
Occasional Contributor III

Works perfectly, thanks Robert!

0 Kudos