Add tooltip to show measure + help message while drawing

2015-02-04 14:40:32 +01:00
parent 8f6cb00ea6
commit c63c358d08
2 changed files with 133 additions and 18 deletions
--- a/examples/measure.html
+++ b/examples/measure.html
@@ -9,6 +9,40 @@
    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
    <title>Measure example</title>
+    <style>
+      .tooltip {
+        position: relative;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        opacity: 0.7;
+        white-space: nowrap;
+      }
+      .tooltip-measure {
+        opacity: 1;
+        font-weight: bold;
+      }
+      .tooltip-static {
+        background-color: #ffcc33;
+        color: black;
+        border: 1px solid white;
+      }
+      .tooltip-measure:before,
+      .tooltip-static:before {
+        border-top: 6px solid rgba(0, 0, 0, 0.5);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        content: "";
+        position: absolute;
+        bottom: -6px;
+        margin-left: -7px;
+        left: 50%;
+      }
+      .tooltip-static:before {
+        border-top-color: #ffcc33;
+      }
+    </style>
  </head>
  <body>

@@ -43,8 +77,6 @@
              </select>
          </form>

-          <ol id="measureOutput" reversed></ol>
-
          <div id="docs">
              <p><i>NOTE: Measure is done in simple way on projected plane. Earth
              curvature is not taken into account</i></p>