Is it possible to override default tooltips?

RobertKirkwood · ‎04-02-2014

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.

RobertKirkwood · ‎04-07-2014

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!

RobertKirkwood · ‎04-07-2014

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!

RobertKirkwood · ‎04-08-2014

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 · ‎04-08-2014

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>

RobertKirkwood · ‎04-09-2014

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.

KenBuja · ‎04-09-2014

Did you try what Kelly suggested in an earlier post?

RobertKirkwood · ‎04-09-2014

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 · ‎04-10-2014

Can you show an example in Fiddle or JSBin?

RobertKirkwood · ‎04-10-2014

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