topic Re: Is it possible to override default tooltips? in ArcGIS JavaScript Maps SDK Questions

Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 16:35:13 GMT

I would like to be able to override the default tooltips for the Homebutton, Simple Slider, and the Locate buttons. I have other tooltips in the map and i want the tooltips to all look the same.

Re: Is it possible to override default tooltips?

KellyHutchins — Wed, 02 Apr 2014 16:39:37 GMT

Hi Robert,

Here's a link to a help topic that explains how to override the default strings in the JSAPI.

https://developers.arcgis.com/javascript/jshelp/inside_bundle.html

Re: Is it possible to override default tooltips?

RobertKirkwood — Sat, 11 Dec 2021 18:13:48 GMT

Hi Robert,

Here's a link to a help topic that explains how to override the default strings in the JSAPI.

https://developers.arcgis.com/javascript/jshelp/inside_bundle.html

Thanks. I have looked and can't seem to find anything that talks about the default tootip being overwritten specifically. I have tried the code below for the Homebutton and the Locate button, but it doesn't seem to work. I have even put in the variable map.

require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
 
 new Tooltip({
        connectId: ["HomeButton"],
        label: "Home",
  orient: ['before'],
    });

I have also tried this in my .css file:

.HomeButton .tooltip {
    font-family: Arial !important;
    font-size: 11px !important;
    font-weight: bold !important;
    
    background-color: white !important;
    
}

I am not sure what i am missing here? Thanks for the help!

Re: Is it possible to override default tooltips?

KellyHutchins — Wed, 02 Apr 2014 17:07:27 GMT

The link I posted shows how to change the default text for the tooltip. Are you trying to change the text or do you want to modify the appearance of the tooltip?

Re: Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 17:16:58 GMT

The link I posted shows how to change the default text for the tooltip. Are you trying to change the text or do you want to modify the appearance of the tooltip?

I am trying to change the default style. I have a white box with a border around the rest of the tooltips in the map. here are the examples:

[ATTACH=CONFIG]32743[/ATTACH]

[ATTACH=CONFIG]32744[/ATTACH]

Re: Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 17:18:57 GMT

I would also like to change the position of the tooltip...

Re: Is it possible to override default tooltips?

KellyHutchins — Sat, 11 Dec 2021 18:13:51 GMT

Ok so the current tooltip for the Home Button is generated using the HTML title attribute Basically when you add the title attribute to an HTML tag the browser will display a tooltip. The style is browser dependent and I don't know of a way to modify the style.

One approach might be to remove the title attribute then add a new one - maybe data-title and then use the mechanism you are using to generate the other tooltips to generate that one. Here's a sample that show hiding the existing tooltip and creating a new one using css.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home Extent</title>
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
  </style>
  <script src="//js.arcgis.com/3.8/"></script>
  <script>

    require([
      "esri/map", 
      "esri/dijit/HomeButton",
      "dojo/i18n!esri/nls/jsapi",
      "dojo/query",
      "dojo/dom-attr",
      "dojo/domReady!"
    ], function(
      Map, HomeButton,esriBundle, query, domAttr
    )  {




      var map = new Map("map", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
            
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      query(".home").forEach(function(node){
        //remove the title attribute 
        //Get the title attribute 
        if(domAttr.get(node, "title") === esriBundle.widgets.homeButton.home.title){
          //replace the title attribute with data-title
          domAttr.remove(node, "title");
          domAttr.set(node, "data-title", esriBundle.widgets.homeButton.home.title )
        }

      });


    });
  </script>
</head>
<body>
  <div id="map" class="map">
    <div id="HomeButton"></div>
  </div>
</body>
</html>

Re: Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 17:56:29 GMT

Excellent! Wow, nice work and thanks so much!

[ATTACH=CONFIG]32747[/ATTACH]

So, now i can do the same thing for the Locate button? I will test that out and see if it works for that too...

Re: Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 18:08:48 GMT

Ok so the current tooltip for the Home Button is generated using the HTML title attribute Basically when you add the title attribute to an HTML tag the browser will display a tooltip. The style is browser dependent and I don't know of a way to modify the style.

One approach might be to remove the title attribute then add a new one - maybe data-title and then use the mechanism you are using to generate the other tooltips to generate that one. Here's a sample that show hiding the existing tooltip and creating a new one using css.

one more question: what is the format for the Locate button widget? i.e. for the Homebutton its "esriBundle.widgets.homeButton.home.title"

Thanks again!

Re: Is it possible to override default tooltips?

KenBuja — Wed, 02 Apr 2014 18:44:06 GMT

If you're using an IDE that has debugging, you can pause it and examine esriBundle. That's how I was able to find the right property in this thread.

Re: Is it possible to override default tooltips?

RobertKirkwood — Sat, 11 Dec 2021 18:13:54 GMT

If you're using an IDE that has debugging, you can pause it and examine esriBundle. That's how I was able to find the right property in this thread.

Thanks for the information. I cant seem to get the right syntax for it...

I tried esriBundle.widgets.locateButton.title = "New" as a test.

when I run the require(["dojo/i18n!esri/nls/jsapi"], function(b) { console.log(b); });

in the console i see the title new, but the button still has Find my location as the tooltip...

when i copy out the html from the source it looks like this:

<div class="LocateButton" role="presentation" id="LocateButton" widgetid="LocateButton" style="display: block;">
    <div class="locateContainer">
            <div data-dojo-attach-point="_locateNode" role="button" class="zoomLocateButton" title="Find my location"><span>My Location</span></div>
    </div>
</div>

here is a screenshot:

[ATTACH=CONFIG]32751[/ATTACH]

any suggestions? thanks again!

Re: Is it possible to override default tooltips?

RobertKirkwood — Wed, 02 Apr 2014 23:27:33 GMT

If you're using an IDE that has debugging, you can pause it and examine esriBundle. That's how I was able to find the right property in this thread.

I found it for the locateButton:

esriBundle.widgets.locateButton.locate.title

Thanks again for you help!

Re: Is it possible to override default tooltips?

RobertKirkwood — Sat, 11 Dec 2021 18:13:57 GMT

the Locatebutton is a bit different from the HomeButton. here is the code that worked:

geoLocate = new LocateButton({
        map: map,   
    }, "LocateButton");
    geoLocate.startup();
 
 query(".zoomLocateButton").forEach(function(node){
        //remove the title attribute 
        //Get the title attribute 
        if(domAttr.get(node, "title") === esriBundle.widgets.locateButton.locate.title){
          //replace the title attribute with data-title
          domAttr.remove(node, "title");
          domAttr.set(node, "title", esriBundle.widgets.locateButton.locate.title )
        }
    });

and the css:

[title]:hover:after {
    content: attr(title);
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    background-color: white;
    border: 1px solid #000000;
    border-radius: 1px;
    padding: 4px 8px;
    left: 40px;
    width: 125px;
    z-index: 20px;
    position: absolute;
}

However, the regular tooltip shows up as well...

[ATTACH=CONFIG]32755[/ATTACH]

Re: Is it possible to override default tooltips?

KellyHutchins — Sat, 11 Dec 2021 18:14:00 GMT

It looks like the issue is that the title attribute isn't getting removed from the locate button - perhaps due to a timing issue. It seems to work if I wait and remove the text after the locate button has loaded. Here's some sample code that shows this:


      var homeText =  esriBundle.widgets.homeButton.home.title;
   
      var locateText =  esriBundle.widgets.locateButton.locate.title;



      geoLocate.on("load", function(){
        query('div[title ="' +  locateText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "data-title", locateText);
        });
      });
      home.on("load", function(){
        //Remove default tooltip for home button 
        query('div[title ="' +  homeText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "data-title", homeText);
        });
      });

Re: Is it possible to override default tooltips?

RobertKirkwood — Sat, 11 Dec 2021 18:14:02 GMT


      var homeText =  esriBundle.widgets.homeButton.home.title;
   
      var locateText =  esriBundle.widgets.locateButton.locate.title;



      geoLocate.on("load", function(){
        query('div[title ="' +  locateText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "data-title", locateText);
        });
      });
      home.on("load", function(){
        //Remove default tooltip for home button 
        query('div[title ="' +  homeText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "data-title", homeText);
        });
      });

Thanks. How do i use this code then? Here is my full java script:

 var map;

var bMap = "topo";

function changeBasemap(bm) {
        bMap=bm;
      
        map.setBasemap(bMap);
         }

require(["esri/map", "esri/toolbars/navigation", 
"dojo/on", 
"dojo/parser", 
"dijit/registry", 
"dijit/Toolbar",
"dijit/form/Button",
"esri/dijit/OverviewMap", 
"esri/dijit/Scalebar", 
"esri/dijit/LocateButton",
"esri/dijit/HomeButton", 
"dojo/i18n!esri/nls/jsapi",
"dojo/query",
"dojo/dom-attr",
"dojo/domReady!"], 
function(Map, Navigation, on, parser, registry, Toolbar, Button, OverviewMap, Scalebar, LocateButton, HomeButton, esriBundle,  query, domAttr ){
      esriBundle.widgets.homeButton.home.title = "HOME"
   esriBundle.widgets.locateButton.locate.title = "FIND MY LOCATION"
   
   
    parser.parse();
    
    var navToolbar;
    
    map = new Map("map", {
        basemap: "topo",
        center: [-107.646372, 43.433484],
        zoom: 7,
        slider: "small"
    });
    
    on(map, "load", addDataLayersInit);
    on(map, "layers-add-result", initTOC);
    //on(map, "layers-add-result", initTOC_Obs);
    
    var scalebar = new Scalebar({
        map: map,
        // "dual" displays both miles and kilmometers
        // "english" is the default, which displays miles
        // use "metric" for kilometers
        scalebarUnit: "dual",
            attachTo:"bottom-right"
            
    });
    
    geoLocate = new LocateButton({
        map: map,   
    }, "LocateButton");
    geoLocate.startup();
      
      query(".zoomLocateButton").forEach(function(node){
        //remove the title attribute 
        //Get the title attribute 
        if(domAttr.get(node, "title") === esriBundle.widgets.locateButton.locate.title){
          //replace the title attribute with data-title
          domAttr.remove(node, "title");
          domAttr.set(node, "title", esriBundle.widgets.locateButton.locate.title )
        }
    });
      
      
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();
        
        query(".home").forEach(function(node){
        //remove the title attribute 
        //Get the title attribute 
        if(domAttr.get(node, "title") === esriBundle.widgets.homeButton.home.title){
          //replace the title attribute with data-title
          domAttr.remove(node, "title");
          domAttr.set(node, "data-title", esriBundle.widgets.homeButton.home.title )
        }
    });
 
      
  
    navToolbar = new Navigation(map);
    on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
    
   
    
    registry.byId("zoomprev").on("click", function(){
        navToolbar.zoomToPrevExtent();
    });
    
    registry.byId("zoomnext").on("click", function(){
        navToolbar.zoomToNextExtent();
    });
  
    
    function extentHistoryChangeHandler(){
        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
        
    }
    
    var overviewMapDijit = new OverviewMap({
        map: map,
        visible: false,
            attachTo: "bottom-right",
            width: 200,
            height: 200
      
            
    });
    overviewMapDijit.startup();
    
});

Re: Is it possible to override default tooltips?

KellyHutchins — Fri, 04 Apr 2014 19:11:12 GMT

Robert,

You'll want to replace your existing code that creates the home and locate button with the code I provided.

Re: Is it possible to override default tooltips?

RobertKirkwood — Mon, 07 Apr 2014 12:51:54 GMT

Robert,

You'll want to replace your existing code that creates the home and locate button with the code I provided.

Kelly,

Thank you so much for your help. That worked out perfectly!

Re: Is it possible to override default tooltips?

KenBuja — Mon, 07 Apr 2014 13:26:34 GMT

Don't forget to click the check on the appropriate post to mark this thread as answered. This will help others in searching on this topic.

Re: Is it possible to override default tooltips?

RobertKirkwood — Mon, 07 Apr 2014 16:34:06 GMT

Robert,

You'll want to replace your existing code that creates the home and locate button with the code I provided.

Well, I am now having trouble with the tooltip for the overview map show/hide button. I am not sure how to get the

"esriBundle.widgets.esriOverviewMap.ovwButton.title" to work correctly. Will i need two of these since there is a show and hide button?

Re: Is it possible to override default tooltips?

KenBuja — Mon, 07 Apr 2014 16:44:58 GMT

Are you sure you're looking at the right variable? I'm seeing these options for the overviewmap widget

[ATTACH=CONFIG]32878[/ATTACH]