Tooltip implementation cleanup.

Re-enables tooltips for modal forms (previously not using delegated events). Fixes bug 918950.
Aligned the x position of the tooltips. Fixes 915762.
Reworks triggers for checkboxes to better handle focus/hover. Fixes bug 915765.

Change-Id: Ic728fd426418c5d81f87256b0674f21050c0e79c

openstack-dashboard/dashboard/static/dashboard/css/style.css

@@ -643,10 +643,17 @@ table tfoot tr td {
     width: 372px;
 }
 
-.modal fieldset input, .modal fieldset select, .modal fieldset textarea, .modal fieldset ul {
+.modal .form-field,
+.modal fieldset ul {
     width: 90%;
 }
 
+.modal fieldset .form-field input,
+.modal fieldset .form-field select,
+.modal fieldset .form-field textarea {
+  width: 100%;
+}
+
 .modal .modal-footer input {
     width: auto;
 }

openstack-dashboard/dashboard/static/dashboard/js/forms.js

@@ -1,80 +1,91 @@
-horizon.addInitFunction(function() {
+horizon.addInitFunction(function () {
   // Disable multiple submissions when launching a form.
-  $("form").submit(function() {
-      $(this).submit(function() {
-          return false;
-      });
-      $('input:submit').removeClass('primary').addClass('disabled');
-      $('input:submit').attr('disabled', 'disabled');
-      return true;
+  $("form").submit(function () {
+    $(this).submit(function () {
+        return false;
+    });
+    $('input:submit').removeClass('primary').addClass('disabled');
+    $('input:submit').attr('disabled', 'disabled');
+    return true;
   });
 
   // TODO (tres): WTF?
-  $(document).on("submit", ".modal #create_keypair_form", function(e) {
+  $(document).on("submit", ".modal #create_keypair_form", function (e) {
     var $this = $(this);
     $this.closest(".modal").modal("hide");
     $('#main_content .page-header').after('<div class="alert-message info">'
-        + '<p><strong>Info: </strong>The data on this page may have changed, '
-        + '<a href=".">click here to refresh it</a>.</p>'
-        + '</div>');
+      + '<p><strong>Info: </strong>The data on this page may have changed, '
+      + '<a href=".">click here to refresh it</a>.</p>'
+      + '</div>');
     return true;
   });
 
   // Confirmation on deletion of items.
   // TODO (tres): These need to be localizable or to just plain go away in favor
   // of modals.
-  $(".terminate").click(function() {
+  $(".terminate").click(function () {
     var response = confirm('Are you sure you want to terminate the Instance: ' + $(this).attr('title') + "?");
     return response;
   });
 
-  $(".delete").click(function(e) {
+  $(".delete").click(function (e) {
     var response = confirm('Are you sure you want to delete the ' + $(this).attr('title') + " ?");
     return response;
   });
 
-  $(".reboot").click(function(e) {
+  $(".reboot").click(function (e) {
     var response = confirm('Are you sure you want to reboot the ' + $(this).attr('title') + " ?");
     return response;
   });
 
-  $(".disable").click(function(e) {
+  $(".disable").click(function (e) {
     var response = confirm('Are you sure you want to disable the ' + $(this).attr('title') + " ?");
     return response;
   });
 
-  $(".enable").click(function(e) {
+  $(".enable").click(function (e) {
     var response = confirm('Are you sure you want to enable the ' + $(this).attr('title') + " ?");
     return response;
   });
 
-  $(".detach").click(function(e) {
+  $(".detach").click(function (e) {
     var response = confirm('Are you sure you want to detach the ' + $(this).attr('title') + " ?");
     return response;
   });
 
-  // Twipsy tooltips
+  /* Twipsy tooltips */
+
   function getTwipsyTitle() {
-      return $(this).closest('div.form-field').children('.help-block').text();
+    return $(this).closest('div.form-field').children('.help-block').text();
   }
 
+  // Standard handler for everything but checkboxes
   $("div.form-field").find("input:not(:checkbox), textarea, select").twipsy({
-      placement:'right',
-      trigger: 'focus',
-      offset: 4,
-      title: getTwipsyTitle
+    placement: 'right',
+    trigger: 'focus',
+    offset: 4,
+    title: getTwipsyTitle,
+    live: true
   });
 
-  /* Trigger the twipsy on hover for checkboxes since focus only happens
-     when the user clicks the element (which is too late for a tooltip to
-     be useful). */
-  $('div.form-field').has("input:checkbox").twipsy({
-      placement: 'right',
-      trigger: 'hover',
-      offset: 4,
-      title: getTwipsyTitle
+  // Checkbox handler for keyboard nav + hover w/ event handlers (see below)
+  $("div.form-field input:checkbox:first").twipsy({
+    placement: 'right',
+    trigger: 'focus',
+    offset: 315,
+    title: getTwipsyTitle,
+    live: true
+  });
+
+  // Handlers to steal focus from other inputs and prevent
+  // multiple twipsies from opening simultaneously.
+  $("body").on("mouseenter", 'div.form-field', function (evt) {
+    $(this).find(":checkbox:first").focus();
+  });
+  $("body").on("mouseleave", 'div.form-field', function (evt) {
+    $(this).find(":checkbox:first").blur();
   });
 
   // Hide the text for js-capable browsers
-    $('span.help-block').hide();
+  $('span.help-block').hide();
 });

openstack-dashboard/dashboard/static/dashboard/js/modals.js

@@ -9,7 +9,8 @@ horizon.addInitFunction(function() {
     $.ajax($this.attr('href'), {
       complete: function (jqXHR, status) {
         $('body').append(jqXHR.responseText);
-        $('body .modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true});
+        $('.modal span.help-block').hide();
+        $('.modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true});
 
         // TODO(tres): Find some better way to deal with grouped form fields.
         var volumeField = $("#id_volume");