diff --git a/examples/panel.html b/examples/panel.html
index da81a4ccf8..88ab4f5e9e 100644
--- a/examples/panel.html
+++ b/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);
diff --git a/lib/OpenLayers/Control.js b/lib/OpenLayers/Control.js
index c4780bb26a..2d83af8db2 100644
--- a/lib/OpenLayers/Control.js
+++ b/lib/OpenLayers/Control.js
@@ -84,6 +84,13 @@ OpenLayers.Control = OpenLayers.Class({
* Control.
*/
displayClass: "",
+
+ /**
+ * Property: title
+ * {string} This property is used for showing a tooltip over the
+ * Control.
+ */
+ title: "",
/**
* Property: active
@@ -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();
diff --git a/lib/OpenLayers/Control/Panel.js b/lib/OpenLayers/Control/Panel.js
index f00f67bc56..51cf56479d 100644
--- a/lib/OpenLayers/Control/Panel.js
+++ b/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",
diff --git a/tests/Control/test_Panel.html b/tests/Control/test_Panel.html
index 56bb77a658..e9fbb14a25 100644
--- a/tests/Control/test_Panel.html
+++ b/tests/Control/test_Panel.html
@@ -46,7 +46,17 @@
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) {
var panel = {
diff --git a/tests/test_Control.html b/tests/test_Control.html
index 47095948b1..4a2e254b9e 100644
--- a/tests/test_Control.html
+++ b/tests/test_Control.html
@@ -21,7 +21,14 @@
t.ok(control.map === map, "Control.map is set to the map object" );
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);