nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is it possible to override default tooltips?

Mr_Kirkwood

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.

Find more posts tagged with

Accepted answers

All comments

khutchins

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

Mr_Kirkwood

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!

khutchins

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?

Mr_Kirkwood

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]

tooltip.png

default tooltip.png

Mr_Kirkwood

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

khutchins

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>

Mr_Kirkwood

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...

tooltip override.png

Mr_Kirkwood

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!

kenbuja

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.

Mr_Kirkwood

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!

locate.jpg

Mr_Kirkwood

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!

Mr_Kirkwood

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]

locatebutton.png

khutchins

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);
        });
      });

Mr_Kirkwood


      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();
    
});

khutchins

Robert,

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

Mr_Kirkwood

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!

kenbuja

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.

Mr_Kirkwood

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?

kenbuja

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

[ATTACH=CONFIG]32878[/ATTACH]

overviewmap.png

Mr_Kirkwood

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

[ATTACH=CONFIG]32878[/ATTACH]

Thanks. that gets me close. However, when i put this in my code "esriBundle.widgets.overviewMap.NLS_show.title = "SHOW"" or " esriBundle.widgets.overviewMap.NLS_hide.title = "HIDE""

it doesn't overwrite the "Show Map Overview" or "Hide Overview Map" text.

This worked for the Home and Locate buttons.

Thanks again for your help!

Mr_Kirkwood

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

[ATTACH=CONFIG]32878[/ATTACH]

Sorry! never mind i was using the left position so the tooltip was off the screen!

Mr_Kirkwood

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

[ATTACH=CONFIG]32878[/ATTACH]

Ken,

I did try the elements associated with the overviewmap as you has shown me. however, i cannot get the text to be overwritten. i can get the tooltip to pop out to the side, but it has the default "Show Map Overview" text and still shows teh default tooltip after a few seconds. I have tried many combinations and can not get it to work. here is what i was trying to work with:

esriBundle.widgets.overviewMap.NLS_show.title = "SHOW"

var locateText = esriBundle.widgets.overviewMap.NLS_show.title;

var overviewshowText =   esriBundle.widgets.overviewMap.NLS_show.title;

      overviewMap.on("load", function(){
        query('div[title ="' +  overviewshowText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "show-title", overviewshowText);
        });
      });

any help would be greatly appreciated. As you can tell i am new to all of this!

kenbuja

This should work

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Overview Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/dijit/OverviewMap",
        "dojo/parser", 
        "dojo/i18n!esri/nls/jsapi",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, OverviewMap, 
        parser, esriBundle
      ) {
        parser.parse(); 

        map = new Map("map", {
          basemap: "topo",
          center: [-122.445, 37.752],
          zoom: 14
        });
        
        esriBundle.widgets.overviewMap.NLS_show = "Testing";


        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
      });
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width: 100%; height: 100%; margin:0;">

      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'" 
           style="padding:0">
      </div>
    </div>
  </body>
</html>

Mr_Kirkwood

This should work

Ken,

Thanks! That does overwrite the default text. However i am now having trouble turning off the default tooltip.

[ATTACH=CONFIG]32960[/ATTACH]

Thanks again for all your help.

overview_tooltip.png

kenbuja

Did you try what Kelly suggested in an earlier post?

Mr_Kirkwood

Did you try what Kelly suggested in an earlier post?

Ken,

I have tried various versions of it. here is an example:

var showText =  esriBundle.widgets.overviewMap.NLS_show;

      overviewMapDijit.on("load", function(){
        query('div[title ="' +  showText + '"]').forEach(function(node){
            domAttr.remove(node, "title");
            domAttr.set(node, "data-title", showText);
        });
      });

CSS..

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

but to no avail...

kenbuja

Can you show an example in Fiddle or JSBin?

Mr_Kirkwood

Can you show an example in Fiddle or JSBin?

Ken,

Here is a sample:

http://jsfiddle.net/Mr_Kirkwood/x4tgd/

I guess another question would be - how do i get tooltips to show up on the zoom in and zoom out buttons?

Also, the overview map is in the bottom left...

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.