Brandon,
The trickiest part of map tips is where to put the code. I have a "headless" widget that does the map tips and lots of other things. It does so many things that I'm having trouble finding the time to document it so I can post it. In it's config file, I have something like this:
"featureLayerMapTips": {
"layers": {
"Address Points (E911)": {
"mapTip": "Address Point (E911): <b>{FULL_ADDR}</b><br><i>Click for more info</i>"
}
}
},
If map tips are configured, we need to create a popup:
// Create the MapTip dialog
this.mapTip = new TooltipDialog({
id: "mapTipDialog",
style: "position:absolute; max-width:300px; z-index:100;",
"class": 'mapTipDialog'
});
this.mapTip.startup();
Then, I have this code (looping through all of the feature layers to see if map tips are configured):
var mapTipTemplate = lang.getObject(layerLabel + '.mapTip', false, this.config.featureLayerMapTips);
if (mapTipTemplate) {
on(layer, 'mouse-out', lang.hitch(this, function() {
if (this.savedSettings.showMapTips) {
clearTimeout(this.mapTipDelay);
clearTimeout(this.mapTipLife);
this._hideMapTip();
}
}));
on(layer, 'mouse-over', lang.hitch(this, function(evt) {
if (this.savedSettings.showMapTips) {
clearTimeout(this.mapTipDelay);
clearTimeout(this.mapTipLife);
this.mapTipDelay = setTimeout(
lang.hitch(this, '_showMaptip', mapTipTemplate, evt),
this.mapTipTimes.delay
);
}
}));
}
Finally, the functions to show and hide the map tips:
_showMaptip: function(mapTipTemplate, evt) {
// If the user is drawing, don't show the mapTip
if (this.drawToolActive) {
return;
}
// If there is an info window showing don't show a MapTip.
if (this.map.infoWindow.isShowing) {
return;
}
var content = lang.replace(mapTipTemplate, evt.graphic.attributes);
if (this.nullValue && this.nullValueReplacement) {
content = content.replace(this.nullValue, this.nullValueReplacement);
}
this.mapTip.setContent(content);
popup.open({
popup: this.mapTip,
x: evt.pageX + 10,
y: evt.pageY + 10
});
// Fade in the MapTip
baseFx.animateProperty({
node: this.mapTip.domNode,
duration: this.mapTipTimes.fadeIn,
properties: {
opacity: 0.85
},
onEnd: lang.hitch(this, function() {
this.mapTipLife = setTimeout(lang.hitch(this, '_hideMapTip'), this.mapTipTimes.life);
})
}).play();
},
_hideMapTip: function() {
// Fade out the MapTip
baseFx.animateProperty({
node: this.mapTip.domNode,
duration: this.mapTipTimes.fadeOut,
properties: {
opacity: 0
},
onEnd: lang.hitch(this, function() {
popup.close(this.mapTip);
})
}).play();
},
Keep in mind that map tips can be very annoying. I give my users a way to turn them off completely, and I have a system where other widgets can publish a topic to turn them on and off (e.g. the Draw Widget). The hide automatically a few seconds after the cursor leaves the map tip. The don't show at all if an infoWindow is open.
Larry
