Added qTip2 plugin to retire old dropdown plugin, as well as added CS…

…S, to close #56

app/assets/javascripts/application.js

@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require html5_shiv/html5
+//= require jquery.qtip.min
 //= require_tree .
 
 $(document).ready(function () {

app/assets/stylesheets/application/controls/jquery.qtip.scss.erb

@@ -0,0 +1,252 @@
+/*##########################################################################*/
+/*  Tooltips, by qTip2 Plugin (http://craigsworks.com/projects/qtip2)  */
+/*##########################################################################*/
+
+
+//////////////////
+
+.ui-tooltip, .qtip {
+  position: absolute;
+  left: -28000px;
+  top: -28000px;
+  display: none;
+  max-width: 280px;
+  min-width: 50px;
+  font-size: 10.5px;
+  line-height: 12px; 
+}
+
+.ui-tooltip-fluid {
+  display: block;
+  visibility: hidden;
+  position: static !important;
+  float: left !important; 
+}
+
+.ui-tooltip-content {
+  position: relative;
+  padding: 5px 9px;
+  overflow: hidden;
+  border: 1px solid #000001;
+  text-align: left;
+  word-wrap: break-word;
+  overflow: hidden; 
+}
+
+.ui-tooltip-titlebar {
+  position: relative;
+  min-height: 14px;
+  padding: 5px 35px 5px 10px;
+  overflow: hidden;
+  border: 1px solid #000001;
+  border-width: 1px 1px 0;
+  font-weight: bold; 
+}
+
+.ui-tooltip-titlebar+.ui-tooltip-content {
+  border-top-width: 0 !important; 
+}
+
+/*!Default close button class */
+
+.ui-tooltip-titlebar .ui-state-default {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  margin-top: -9px;
+  cursor: pointer;
+  outline: medium none;
+  border-width: 1px;
+  border-style: solid; 
+}
+
+* html .ui-tooltip-titlebar .ui-state-default {
+  top: 16px; 
+}
+
+.ui-tooltip-titlebar .ui-icon {
+  display: block;
+  text-indent: -1000em; 
+}
+
+.ui-tooltip-icon {
+
+  .ui-icon {
+    display: block;
+    text-indent: -1000em;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    width: 18px;
+    height: 14px;
+    text-align: center;
+    text-indent: 0;
+    font: normal bold 10px / 13px Tahoma, sans-serif;
+    color: inherit;
+    background: transparent none no-repeat -100em -100em; 
+  }
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px; 
+}
+
+/*!Default tooltip style */
+
+.ui-tooltip-default {
+
+  .ui-tooltip-titlebar, .ui-tooltip-content {
+    border-color: #F1D031;
+    background-color: #FFFFA3;
+    color: #555; 
+  }
+
+  .ui-tooltip-titlebar {
+    background-color: #FFEF93; 
+  }
+
+  .ui-tooltip-icon {
+    border-color: #CCC;
+    background: #F1F1F1;
+    color: #777; 
+  }
+
+  .ui-tooltip-titlebar .ui-state-hover {
+    border-color: #AAA;
+    color: #111; 
+  } 
+}
+
+.ui-tooltip .ui-tooltip-tip {
+  margin: 0 auto;
+  overflow: hidden;
+  z-index: 10;
+  position: absolute;
+  line-height: .1px !important;
+  font-size: .1px !important;
+  color: #123456;
+  background: transparent;
+  border: 0 dashed transparent;
+
+  * {
+    position: absolute;
+    line-height: .1px !important;
+    font-size: .1px !important;
+    color: #123456;
+    background: transparent;
+    border: 0 dashed transparent; 
+  }
+
+  canvas {
+    top: 0;
+    left: 0; 
+  } 
+
+}
+
+#qtip-overlay {
+  position: fixed;
+  left: -10000em;
+  top: -10000em;
+
+  &.blurs {
+    cursor: pointer; 
+  }
+
+  div {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: .7;
+    filter: alpha(opacity = 70);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
+  } 
+}
+
+/*!Light tooltip style */
+
+.ui-tooltip-light {
+
+  .ui-tooltip-titlebar {
+    border-color: #E2E2E2;
+    color: #454545; 
+  }
+
+  .ui-tooltip-content {
+    border-color: #E2E2E2;
+    color: #454545;
+    background-color: white; 
+  }
+
+  .ui-tooltip-titlebar {
+    background-color: #f1f1f1; 
+  } 
+}
+
+/*!Add shadows to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE6+,Safari 2+*/
+
+.ui-tooltip-shadow {
+  @include box-shadow(1px 1px 3px 1px rgba(0, 0, 0, 0.15) );
+
+  .ui-tooltip-titlebar, .ui-tooltip-content {
+    filter: progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3)";
+    _margin-bottom: -3px;
+    .margin-bottom: -3px; 
+  } 
+}
+
+/*!Add rounded corners to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE9+,Safari 2+*/
+
+.ui-tooltip-rounded, .ui-tooltip-tipsy, .ui-tooltip-youtube {
+  @include border-radius(4px);
+
+  .ui-tooltip-content {
+    @include border-radius(4px);
+  } 
+}
+
+.ui-tooltip-rounded .ui-tooltip-titlebar, .ui-tooltip-tipsy .ui-tooltip-titlebar, .ui-tooltip-youtube .ui-tooltip-titlebar {
+  @include border-radius-corners(5px, 5px, 0px, 0px);
+}
+
+.ui-tooltip-rounded .ui-tooltip-titlebar+.ui-tooltip-content, .ui-tooltip-tipsy .ui-tooltip-titlebar+.ui-tooltip-content {
+  @include border-radius-corners(0px, 0px, 5px, 5px);
+}
+
+.ui-tooltip-dark {
+
+  .ui-tooltip-titlebar+.ui-tooltip-content {
+    @include border-radius-corners(0px, 0px, 5px, 5px);
+  }
+
+  @include box-shadow(0 0 3px #333);
+
+  .ui-tooltip-titlebar, .ui-tooltip-content {
+    _margin-bottom: 0;
+    .margin-bottom: 0;
+    background: transparent;
+    background: rgba(0, 0, 0, 0.85);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";
+    color: white;
+    border-color: #CCC; 
+  }
+
+  .ui-tooltip-icon {
+    border-color: #222; 
+  }
+
+  .ui-tooltip-titlebar .ui-state-hover {
+    border-color: #303030; 
+  } 
+}
+
+.ui-tooltip:not(.ie9haxors) div {
+  &.ui-tooltip-content, &.ui-tooltip-titlebar {
+    filter: none;
+    -ms-filter: none; 
+  } 
+}

app/assets/stylesheets/application/index-manifest.scss

@@ -7,6 +7,7 @@
 @import "controls/button-groups";
 @import "controls/datetime";
 @import "controls/sliders";
+@import "controls/jquery.qtip";
 
 @import "layout/scaffolding";
 @import "layout/type";