topic Re: Hide Tooltips after X seconds in ArcGIS JavaScript Maps SDK Questions

Hide Tooltips after X seconds

AshleyPeters — Sat, 11 Dec 2021 11:06:00 GMT

I have implemented the Feature Layer Hover sample in my map. I've added in a max scale to control when the tooltips are shown. I'd also like to be able to hide the tooltips after a certain period of time so they do not continue to block the user's view. I've tried a few different options, without success. I reworked my code a bit to try the solution I found here, but I didn't have much luck. I wasn't sure whether it was best to use a hide or setTimeout, or maybe even an if/else statement. Any suggestions appreciated.

My code as it currently stands:

tooltips.setRenderer(new SimpleRenderer(tooltipFill));

dialog = new TooltipDialog({
          id: "tooltipDialog"
          //style: "position: absolute; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

mapMain.on("load", function (){
     mapMain.graphics.enableMouseEvents();
     mapMain.graphics.on("mouse-out", closeDialog);
});

tooltips.on("mouse-over", function (evt){
     var parksTooltips = "${NAME}";
     var content = esriLang.substitute(evt.graphic.attributes, parksTooltips);
     var highlightGraphic = new Graphic(evt.graphic.geometry, tooltipFill);
     mapMain.graphics.add(highlightGraphic);

dialog.setContent(content);

domStyle.set(dialog.domNode, "opacity", 0.85);
dijitPopup.open({
     popup: dialog,
     x: evt.pageX,
     y: evt.pageY
     });
});

function closeDialog() {
     mapMain.graphics.clear();
     dijitPopup.close(dialog);
     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Tooltips after X seconds

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:06:02 GMT

Ashley,

Here is what I use in my Identify widget to auto close the maps infowindow:

      this.graphicsLayer.on('mouse-over', lang.hitch(this, this.mouseOverGraphic));
      this.graphicsLayer.on('mouse-out', lang.hitch(this, this.mouseOutGraphic));

      //mouse over graphic
      mouseOverGraphic: function(event) {
        this.disableTimer();
        //do something here to show your tooltip
      },

      mouseOutGraphic: function (event) {
        this.timedClose();
      },

      timedClose: function(){
        clearTimeout(this.timer);
        this.timer = setTimeout(
          lang.hitch(this, function(){
            //hide your tooltip
          }
        ),2000);
      },

      disableTimer: function(){
        clearTimeout(this.timer);
      },

//I am using mapinfowindow so I attach mouseover and mouseout to the infowindow
      this.infoWinMouseOver = on(this.map.infoWindow.domNode, 'mouseover', lang.hitch(this, function(){
        this.disableTimer();
      }));

      this.infoWinMouseOut = on(this.map.infoWindow.domNode, 'mouseout', lang.hitch(this, function() {
        this.timedClose();
      }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Tooltips after X seconds

AshleyPeters — Mon, 26 Sep 2016 13:44:27 GMT

Thanks Robert! I'll see if I can get that implemented.