If you are using version 2.2 of the API you can use the new formatting capabilities of the info window to generate a title when the feature is clicked. The 'Formating Info Window content' help topic has details on how to accomplish this - see the 'Deferred Object' section. Here's a code sample that shows how to generate the title, in this case we use an attribute from the graphics for demonstration purposes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/Claro/Claro.css">
<style type="text/css">
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden;
font-family: "Kimberley", sans-serif
}
#map {
margin:5px;
border:solid 4px #2A2F30;
padding:0px;
}
.shadow{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 8px 8px 16px #323834;
-webkit-box-shadow: 8px 8px 16px #323834;
-moz-box-shadow: 8px 8px 16px #323834;
-o-box-shadow: 8px 8px 16px #323834;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dojo.number");
dojo.require("esri.layers.FeatureLayer");
var map,trailLayer;
var template;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13042392,"ymin":4324579,"xmax":-13021640,"ymax":4335968,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
map.infoWindow.resize(150, 150);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
//add the trails feature layer to the map
template = new esri.InfoTemplate();
template.setTitle(getTitle);
template.setContent(getTextContent);
trailLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/Recreation/MapServer/1", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields: ["*"]
});
//create a new renderer for the feature layer
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,255,0,.70]), 5);
trailLayer.setRenderer(new esri.renderer.SimpleRenderer(lineSymbol));
map.addLayer(trailLayer);
//add world place names to the map
var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(referenceLayer);
}
function getTitle(graphic){
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback("Title: " + graphic.attributes["notes"]);
}, 500);
return deferred;
}
//Generate the content for the info window when the feature is clicked.
function getTextContent(graphic) {
return 'My Test Content';
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
<div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center"></div>
</div>
</body>
</html>
