Using angular-ui-bootstrap for tooltip on character picker

-- Needed to escape the scrolling div, which wasn't possible with
hint.css.
-- Couldn't switch everywhere, unfortunately, because
angular-ui-bootstrap tooltips have some nasty bugs dealing with disabled
input fields where the tooltips wouldn't go away.

CONTRIB.md

@@ -29,6 +29,5 @@ The following third-party software packages were used in the creation of keyboar
 * [Jison](http://zaach.github.io/jison/) (JavaScript parser generator)
 * [Hint.css](http://kushagragour.in/lab/hint/) (CSS-only tooltips)
 * [doT.js](http://olado.github.io/doT/) (fast micro-templating)
-* [cssparser](https://github.com/cwdoh/cssparser.js)
 * [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
 * [C64 TrueType Font](http://style64.org/c64-truetype) font (by [Style64.org](https://www.style64.org))

kb.css

@@ -161,7 +161,6 @@ for i in (1..9) {
 }
 
 #swatches.disabled .swatch { background-color: rgb(235,235,228) !important; }
-#swatches [data-hint]:after, #glyphs [data-hint]:after { white-space: nowrap; }
 
 .swatch .highlight { display: none; }
 .swatch.selected-bg .highlight.bg { display: block; z-index: 100; width: 6px; height: 6px; border: solid 1px black; background: white; opacity: 0.75; position: absolute; left: 7px; top: 23px; }
@@ -201,7 +200,7 @@ for i in (1..9) {
 /* Tooltip modifications */
 .hint--rounded:after { width: 300px; }
 .hint:after, [data-hint]:after { white-space: pre-line; }
-.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; transition: 0.1s ease; }
+.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { -webkit-transition: 0.05s ease; -moz-transition: 0.05s ease; transition: 0.05s ease; }
 
 /* Help Dialog */
 .modal-xl .modal-dialog { width: 80vw; }

kb.html

@@ -454,9 +454,9 @@ Nav Bar / Header
           <li ng-repeat="color in palette.colors"
              ng-style="{'background-color':color.css}"
              ng-click="clickSwatch(color,$event)"
-             class="swatch hint--top"
+             class="swatch"
              ng-class="{'selected-bg': color.css === multi.color, 'selected-fg': color.css === multi.default.textColor}"
-             data-hint="{{color.name}}"
+             tooltip="{{color.name}}"
              ui-draggable="true" drag-channel="dragColor" drag="color">
                <div class='highlight fg'></div>
                <div class='highlight bg'></div>
@@ -470,22 +470,22 @@ Nav Bar / Header
       <!-- Character Picker -->
       <div class="col-md-6 col-lg-6" ng-class="{hidden:!picker.name}">
         {{picker.name}}
-        <div class="col-md-12 col-lg-12 hint--top hint--rounded" style="padding:4px 0px;">
+        <div class="col-md-12 col-lg-12" style="padding:4px 0px;">
           <input id="picker-filter" class="form-control input-sm" type='text' ng-model="pickerFilter" placeholder="Filter"
                  ng-change="pickerSelection = {}">
         </div>
         <div id="glyphScroller">
           <ul id="glyphs" ng-class="{disabled:selectedKeys.length<1}">
             <li ng-repeat="glyph in picker.glyphs | filter:pickerFilter"
-               class="glyph hint--top"
-               data-hint="{{glyph.desc}}"
+               class="glyph"
+               tooltip="{{glyph.desc}}"
                ng-click="pickerSelect(glyph)"
                ng-bind-html="glyph.html"
                ng-class="{selected:pickerSelection===glyph}">
             </li>
           </ul>
         </div>
-        <div class="col-md-12 col-lg-12 hint--top hint--rounded" style="padding:4px 0px;">
+        <div class="col-md-12 col-lg-12" style="padding:4px 0px;">
           <input id="picker-html" class="form-control input-sm" type='text' 
                 ng-model="pickerSelection.html" placeholder="No glyph selected" 
                 onClick="this.select();" readonly>

kb.js

@@ -11,7 +11,10 @@
 	function fromJsonPretty(json) { return $serial.fromJsonL('['+json+']'); }
 
 	// The angular module for our application
-	var kbApp = angular.module('kbApp', ["ngSanitize", "ui.utils", "ui.bootstrap", "ngFileUpload", "ang-drag-drop", "colorpicker.module"]);
+	var kbApp = angular.module('kbApp', ["ngSanitize", "ui.utils", "ui.bootstrap", "ui.bootstrap.tooltip", "ngFileUpload", "ang-drag-drop", "colorpicker.module"], function($tooltipProvider) {
+		// Default tooltip behaviour
+    $tooltipProvider.options({animation: false, appendToBody: true});
+	});
 
 	// The main application controller
 	kbApp.controller('kbCtrl', ['$scope','$http','$location','$timeout', '$sce', '$sanitize', '$modal', function($scope, $http, $location, $timeout, $sce, $sanitize, $modal) {