From 7d9b595dfa7fa07000e4f8de2a07f604a0da173a Mon Sep 17 00:00:00 2001
From: Ilya Shakhat <ishakhat@mirantis.com>
Date: Mon, 17 Feb 2014 15:42:23 +0400
Subject: [PATCH] Added tooltips to main filters

Closes bug 1216951

Change-Id: I17bee9024ccbaa21ddaad3ffdadd6dd99ebf52c6
---
 dashboard/static/css/style.css  | 13 +++++++++++++
 dashboard/templates/layout.html | 16 ++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/dashboard/static/css/style.css b/dashboard/static/css/style.css
index c617605e9..5c9a2151b 100644
--- a/dashboard/static/css/style.css
+++ b/dashboard/static/css/style.css
@@ -385,3 +385,16 @@ a[href^="https://launchpad"]:after {
 .select2-results {
     max-height: 300px;
 }
+
+.ui-tooltip {
+    box-shadow: 0 0 5px #AAAAAA;
+    max-width: 300px;
+    padding: 8px;
+    position: absolute;
+    z-index: 9999;
+}
+body .ui-tooltip {
+    border-width: 2px;
+    background-color: white;
+    opacity: 0.8;
+}
diff --git a/dashboard/templates/layout.html b/dashboard/templates/layout.html
index c4e45850b..71c429d13 100644
--- a/dashboard/templates/layout.html
+++ b/dashboard/templates/layout.html
@@ -25,6 +25,7 @@
 <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">
 
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.9.1.min.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.jqplot.min.js') }}"></script>
 <!--[if lt IE 9]><script type="text/javascript" src="{{ url_for('static', filename='js/excanvas.min.js') }}"></script><![endif]-->
@@ -44,6 +45,9 @@
     $(document).ready(function () {
         init_selectors("");
     });
+    $(function () {
+        $(document).tooltip();
+    });
 
 </script>
 
@@ -66,32 +70,32 @@
         <div class="drops">
 
             <div class="drop">
-                <label for="release">Release</label>
+                <label for="release" title="Official releases of OpenStack">Release</label>
                 <input type="hidden" id="release" style="width: 140px" data-placeholder="Select release"/>
             </div>
 
             <div class="drop">
-                <label for="project_type">Projects</label>
+                <label for="project_type" title="Project type groups modules of same kind: official (integrated, incubated, other) or belonging to same organization (stackforge, infra)">Project Type</label>
                 <input type="hidden" id="project_type" style="width: 140px" data-placeholder="Select project type"/>
             </div>
 
             <div class="drop">
-                <label for="module">Module</label>
+                <label for="module" title="Module represents a repo (black), official program (violet) or pre-configured group of modules (cyan)">Module</label>
                 <input type="hidden" id="module" style="width: 140px" data-placeholder="Any module" value="{{ module }}"/>
             </div>
 
             <div class="drop">
-                <label for="company">Company</label>
+                <label for="company" title="Company name">Company</label>
                 <input type="hidden" id="company" style="width: 140px" data-placeholder="Any company" value="{{ company }}"/>
             </div>
 
             <div class="drop">
-                <label for="company">Engineer</label>
+                <label for="user" title="Name of engineer as configured in Launchpad or default_data.json">Engineer</label>
                 <input type="hidden" id="user" style="width: 140px" data-placeholder="Any engineer" value="{{ user_id }}"/>
             </div>
 
             <div class="drop">
-                <label for="metric">Metric</label>
+                <label for="metric" title="One of available metrics">Metric</label>
                 <input type="hidden" id="metric" style="width: 140px" data-placeholder="Select metric"/>
             </div>