Select to view content in your preferred language

Is it possible to override default tooltips?

9955
28
04-02-2014 09:35 AM
RobertKirkwood
Occasional Contributor III
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.
0 Kudos
28 Replies
RobertKirkwood
Occasional Contributor III
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!
0 Kudos
RobertKirkwood
Occasional Contributor III
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!
0 Kudos
RobertKirkwood
Occasional Contributor III
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]
0 Kudos
KellyHutchins
Esri Frequent Contributor
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);
        });
      });

RobertKirkwood
Occasional Contributor III
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);
        });
      });



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();
    
});
0 Kudos
KellyHutchins
Esri Frequent Contributor
Robert,

You'll want to replace your existing code that creates the home and locate button with the code I provided.
RobertKirkwood
Occasional Contributor III
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!
0 Kudos
KenBuja
MVP Esteemed Contributor
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.
RobertKirkwood
Occasional Contributor III
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?
0 Kudos
KenBuja
MVP Esteemed Contributor
Are you sure you're looking at the right variable? I'm seeing these options for the overviewmap widget

[ATTACH=CONFIG]32878[/ATTACH]