Add support to set the 'title' property of a control such that it will

be displayed when hovering over the control in a control.panel via its 
panel_div. r=me (Closes #822)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@5910 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/panel.html

@@ -69,13 +69,16 @@
             map.addLayer(vlayer);
             
             
-            zb = new OpenLayers.Control.ZoomBox();
+            zb = new OpenLayers.Control.ZoomBox(
+                {title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."});
             var panel = new OpenLayers.Control.Panel({defaultControl: zb});
             panel.addControls([
-                new OpenLayers.Control.MouseDefaults(),
+                new OpenLayers.Control.MouseDefaults(
+                    {title:'You can use the default mouse configuration'}), 
                 zb,
-                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path),
-                new OpenLayers.Control.ZoomToMaxExtent()
+                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
+                    {title:'Draw a feature'}),
+                new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"}) 
             ]);
             map.addControl(panel);
 

lib/OpenLayers/Control.js

@@ -85,6 +85,13 @@ OpenLayers.Control = OpenLayers.Class({
      */
     displayClass: "",
     
+    /**
+    * Property: title  
+    * {string}  This property is used for showing a tooltip over the  
+    * Control.  
+    */ 
+    title: "",
+
     /** 
      * Property: active 
      * {boolean} null
@@ -172,6 +179,9 @@ OpenLayers.Control = OpenLayers.Class({
         if (this.div == null) {
             this.div = OpenLayers.Util.createDiv(this.id);
             this.div.className = this.displayClass;
+            if (this.title != "") {
+                this.div.title = this.title;
+            }
         }
         if (px != null) {
             this.position = px.clone();

lib/OpenLayers/Control/Panel.js

@@ -172,6 +172,9 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
             var element = document.createElement("div");
             var textNode = document.createTextNode(" ");
             controls[i].panel_div = element;
+            if (controls[i].title != "") {
+                controls[i].panel_div.title = controls[i].title;
+            }
             OpenLayers.Event.observe(controls[i].panel_div, "click", 
                 OpenLayers.Function.bind(this.onClick, this, controls[i]));
             OpenLayers.Event.observe(controls[i].panel_div, "mousedown", 

tests/Control/test_Panel.html

@@ -46,6 +46,16 @@
         t.ok(!toolControl.active && anotherToolControl.active && toggleControl.active,
               "activated the other tool control, the first one is inactive and the toggle control still active.");
     }
+    function test_02_Control_Panel_titles (t) { 
+        t.plan(2); 
+        var panel = new OpenLayers.Control.Panel(); 
+        var toolControl = new OpenLayers.Control.ZoomBox({ 
+            title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging." 
+        }); 
+        panel.addControls([toolControl]); 
+        t.eq(panel.controls.length, 1, "added a control to the panel"); 
+        t.eq(panel.controls[0].title, toolControl.panel_div.title, "the title is correctly set"); 
+    } 
     
     function test_Control_Panel_getBy(t) {
         

tests/test_Control.html

@@ -22,6 +22,13 @@
         t.ok(map.controls[map.controls.length - 1] === control, "map.controls contains control");
     }
     
+    function test_Control_title(t) { 
+        t.plan( 1 ); 
+        var titleText = 'Title test'; 
+        control = new OpenLayers.Control({title:titleText}); 
+        t.eq( control.title, titleText, "control.title set correctly" ); 
+    }
+    
     function test_Control_destroy(t) {
         t.plan(3);