use button elements and add tooltips to zoomcontrol

css/ol.css

@@ -120,7 +120,7 @@
   }
 }
 
-.ol-zoom a,
+.ol-zoom button,
 .ol-zoom-extent a,
 .ol-full-screen a {
   display: block;
@@ -136,20 +136,22 @@
   line-height: 19px;
   background-color: #7b98bc;
   background-color: rgba(0,60,136,0.5);
+  border: none;
 }
 .ol-zoom-extent a {
   font-size: 16px;
   line-height: 22px;
   border-radius: 2px;
 }
-.ol-touch .ol-zoom a,
+.ol-touch .ol-zoom button,
 .ol-touch .ol-zoom-extent a {
   font-size: 20px;
   height: 30px;
   width: 30px;
   line-height: 26px;
 }
-.ol-zoom a:hover,
+.ol-zoom button:hover,
+.ol-zoom button:focus,
 .ol-zoom-extent a:hover {
   color: #fff;
   text-decoration: none;
@@ -175,6 +177,40 @@ a.ol-full-screen-true:after {
   border-radius: 2px;
 }
 
+/* invisible but not hidden */
+.olHasToolTip span, .olHasTooltip_b_r span {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px); /* < IE8 */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  font-weight: normal;
+  font-size: 16px;
+}
+
+/* show a tooltip offset to below and right */
+.olHasToolTip:hover span, .olHasToolTip:focus span ,
+.olHasTooltip_b_r:hover span , .olHasTooltip_b_r:focus span  {
+  clip: auto;
+  padding: 3px;
+  height: auto;
+  width: auto;
+  z-index: 1100;
+  max-height: 100px;
+  white-space: nowrap;
+  display: inline-block;
+  background-color: #eee;
+  color: #000;
+  border: 1px solid #333;
+  border-radius: 5px;
+  box-shadow: 2px 2px 2px #333;
+  bottom: -2em;
+  left: 1em;
+}
+
 .ol-zoomslider {
   position: absolute;
   top: 67px;

src/ol/control/zoomcontrol.js

@@ -37,19 +37,28 @@ ol.control.Zoom = function(opt_options) {
   var zoomOutLabel = goog.isDef(options.zoomOutLabel) ?
       options.zoomOutLabel : '\u2212';
 
-  var inElement = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#zoomIn',
-    'class': className + '-in'
-  }, zoomInLabel);
+  var tTipZoomIn = goog.dom.createDom(goog.dom.TagName.SPAN, {
+          'class':'', 
+          'role':'tooltip'
+      },"Zoom in");
+  var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': className + '-in olHasToolTip',
+    'name' : 'zoomIn'
+  }, tTipZoomIn, zoomInLabel);
+  
   goog.events.listen(inElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
   ], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, delta), false, this);
 
-  var outElement = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#zoomOut',
-    'class': className + '-out'
-  }, zoomOutLabel);
+  var tTipsZoomOut = goog.dom.createDom(goog.dom.TagName.SPAN, {
+          'class':'', 
+          'role':'tooltip'
+      }, "Zoom out");
+  var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': className + '-out  olHasToolTip',
+    'name' : 'zoomOut'
+  }, tTipsZoomOut, zoomOutLabel);
   goog.events.listen(outElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK