GUI --Base Tooltip Service created.

      - tips will appear above the mouse when element is hovered over
      - tips disappear after mouse leaves element
      - positioning of tooltip is still WIP, testing of it was run in Sample View

Change-Id: Ic3be1235bf8d2d4bbf473f965e3a1f8c79ce9fc6

@@ -21,7 +21,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, fs, is;
+    var $log, fs, is, tts;
 
 
     // configuration
     // configuration
     var btnSize = 25,
     var btnSize = 25,
@@ -49,6 +49,11 @@
         return btnSize + 2 * btnPadding;
         return btnSize + 2 * btnPadding;
     }
     }
 
 
+    function addTooltip(elem, tooltip) {
+        elem.on('mouseover', function () { tts.showTooltip(this, tooltip); });
+        elem.on('mouseout', function () { tts.cancelTooltip(this); });
+    }
+
 
 
     // === BUTTON =================================================
     // === BUTTON =================================================
 
 
@@ -64,6 +69,7 @@
             cbFnc = fs.isF(cb) || noop;
             cbFnc = fs.isF(cb) || noop;
 
 
         is.loadIcon(btnDiv, gid, btnSize, true);
         is.loadIcon(btnDiv, gid, btnSize, true);
+        if (tooltip) { addTooltip(btnDiv, tooltip); }
 
 
         btnDiv.on('click', cbFnc);
         btnDiv.on('click', cbFnc);
 
 
@@ -91,6 +97,7 @@
 
 
         is.loadIcon(togDiv, gid, btnSize, true);
         is.loadIcon(togDiv, gid, btnSize, true);
         togDiv.classed('selected', sel);
         togDiv.classed('selected', sel);
+        if (tooltip) { addTooltip(togDiv, tooltip); }
 
 
         function _toggle(b, nocb) {
         function _toggle(b, nocb) {
             sel = (b === undefined) ? !sel : !!b;
             sel = (b === undefined) ? !sel : !!b;
@@ -180,6 +187,7 @@
             rbdiv.classed('selected', initSel);
             rbdiv.classed('selected', initSel);
             rbdiv.on('click', rbclick);
             rbdiv.on('click', rbclick);
             is.loadIcon(rbdiv, btn.gid, btnSize, true);
             is.loadIcon(rbdiv, btn.gid, btnSize, true);
+            if (btn.tooltip) { addTooltip(rbdiv, btn.tooltip); }
             angular.extend(btn, {
             angular.extend(btn, {
                 el: rbdiv,
                 el: rbdiv,
                 id: rid,
                 id: rid,
@@ -243,12 +251,13 @@
 
 
     angular.module('onosWidget')
     angular.module('onosWidget')
     .factory('ButtonService',
     .factory('ButtonService',
-        ['$log', 'FnService', 'IconService',
+        ['$log', 'FnService', 'IconService', 'TooltipService',
 
 
-        function (_$log_, _fs_, _is_) {
+        function (_$log_, _fs_, _is_, _tts_) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
             is = _is_;
             is = _is_;
+            tts = _tts_;
 
 
             return {
             return {
                 button: button,
                 button: button,

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Tooltip Service -- CSS file
+ */
+
+#tooltip {
+    text-align: center;
+    font-size: 80%;
+    border: 1px solid;
+    padding: 5px;
+    position: absolute;
+    z-index: 5000;
+    display: none;
+    pointer-events: none;
+}
+
+/* colors subject to change */
+
+.light #tooltip {
+    background-color: #ddd;
+    color: #444;
+    border-color: #ccc;
+}
+
+.dark #tooltip {
+    background-color: #151515;
+    color: #B2B2B2;
+    border-color: #252525;
+}
\ No newline at end of file

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Widget -- Tooltip Service
+ */
+
+(function () {
+    'use strict';
+
+    // injected references
+    var $log, $timeout, fs;
+
+    // constants
+    var hoverHeight = 35,
+        hoverDelay = 500,
+        exitDelay = 100;
+
+    // internal state
+    var tooltip, currElemId;
+
+    function init() {
+        tooltip = d3.select('#tooltip');
+        tooltip.html('');
+    }
+
+    // === API functions ------------------------------------------------
+
+    function showTooltip(el, msg) {
+        if (!el || !msg) {
+            return;
+        }
+        var elem = d3.select(el),
+            mouseX = d3.event.pageX,
+            mouseY = d3.event.pageY;
+        currElemId = elem.attr('id');
+
+        tooltip.transition()
+            .delay(hoverDelay)
+            .each('start', function () {
+                d3.select(this).style('display', 'none');
+            })
+            .each('end', function () {
+                d3.select(this).style({
+                    display: 'inline-block',
+                    left: mouseX + 'px',
+                    top: (mouseY - hoverHeight) + 'px'
+                })
+                    .text(msg);
+            });
+    }
+
+    function cancelTooltip(el) {
+        if (!el) {
+            return;
+        }
+        var elem = d3.select(el);
+
+        if (elem.attr('id') === currElemId) {
+            tooltip.transition()
+                .delay(exitDelay)
+                .style({
+                    display: 'none'
+                })
+                .text('');
+        }
+    }
+
+    angular.module('onosWidget')
+        .factory('TooltipService', ['$log', '$timeout', 'FnService',
+
+        function (_$log_, _$timeout_, _fs_) {
+            $log = _$log_;
+            $timeout = _$timeout_;
+            fs = _fs_;
+
+            init();
+
+            return {
+                showTooltip: showTooltip,
+                cancelTooltip: cancelTooltip
+            };
+        }]);
+}());

@@ -86,16 +86,16 @@
 
 
             toolbar = tbs.createToolbar(tbid);
             toolbar = tbs.createToolbar(tbid);
             rset = [
             rset = [
-                { gid: 'checkMark', cb: checkFn },
+                { gid: 'checkMark', cb: checkFn, tooltip: 'rbtn tooltip' },
                 { gid: 'xMark', cb: xMarkFn },
                 { gid: 'xMark', cb: xMarkFn },
-                { gid: 'bird', cb: birdFn }
+                { gid: 'bird', cb: birdFn, tooltip: 'hello' }
             ];
             ];
 
 
-            toolbar.addButton('demo-button', 'crown', btnFn);
-            toolbar.addToggle('demo-toggle', 'chain', false, togFn);
+            toolbar.addButton('demo-button', 'crown', btnFn, 'yay a tooltip');
+            toolbar.addToggle('demo-toggle', 'chain', false, togFn, 'another tooltip');
             toolbar.addSeparator();
             toolbar.addSeparator();
             toolbar.addRadioSet('demo-radio', rset);
             toolbar.addRadioSet('demo-radio', rset);
-            toolbar.hide();
+            toolbar.show();
 
 
             checkFn();
             checkFn();
 
 

@@ -20,6 +20,7 @@
  */
  */
 
 
 (function () {
 (function () {
+    'use strict';
 
 
     // injected references
     // injected references
     var $log, tbs, api;
     var $log, tbs, api;

@@ -59,6 +59,7 @@
     <script src="app/fw/widget/widget.js"></script>
     <script src="app/fw/widget/widget.js"></script>
     <script src="app/fw/widget/table.js"></script>
     <script src="app/fw/widget/table.js"></script>
     <script src="app/fw/widget/toolbar.js"></script>
     <script src="app/fw/widget/toolbar.js"></script>
+    <script src="app/fw/widget/tooltip.js"></script>
     <script src="app/fw/widget/button.js"></script>
     <script src="app/fw/widget/button.js"></script>
 
 
     <script src="app/fw/layer/layer.js"></script>
     <script src="app/fw/layer/layer.js"></script>
@@ -81,6 +82,7 @@
     <link rel="stylesheet" href="app/fw/nav/nav.css">
     <link rel="stylesheet" href="app/fw/nav/nav.css">
     <link rel="stylesheet" href="app/fw/widget/button.css">
     <link rel="stylesheet" href="app/fw/widget/button.css">
     <link rel="stylesheet" href="app/fw/widget/toolbar.css">
     <link rel="stylesheet" href="app/fw/widget/toolbar.css">
+    <link rel="stylesheet" href="app/fw/widget/tooltip.css">
 
 
     <!-- This is where contributed javascript will get injected -->
     <!-- This is where contributed javascript will get injected -->
     <!-- {INJECTED-JAVASCRIPT-START} -->
     <!-- {INJECTED-JAVASCRIPT-START} -->
@@ -124,6 +126,7 @@
 
 
     <div id="floatpanels"></div>
     <div id="floatpanels"></div>
     <div id="alerts"></div>
     <div id="alerts"></div>
+    <div id="tooltip"></div>
     <div id="flash"></div>
     <div id="flash"></div>
     <div id="quickhelp"></div>
     <div id="quickhelp"></div>
     <div id="veil"
     <div id="veil"

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Widget -- Tooltip Service - Unit Tests
+ */
+describe('factory: fw/widget/tooltip.js', function () {
+    var $log, fs, tts, d3Elem;
+
+    beforeEach(module('onosWidget', 'onosUtil'));
+
+    beforeEach(inject(function (_$log_, FnService, TooltipService) {
+        $log = _$log_;
+        fs = FnService;
+        tts = TooltipService;
+    }));
+
+    beforeEach(function () {
+        d3Elem = d3.select('body').append('div').attr('id', 'tooltip');
+    });
+
+    afterEach(function () {
+        d3.select('#tooltip').remove();
+    });
+
+    it('should define TooltipService', function () {
+        expect(tts).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(tts, [
+            'showTooltip', 'cancelTooltip'
+        ])).toBeTruthy();
+    });
+
+    it('should not accept undefined arguments', function () {
+        var btn = d3.select('body').append('div');
+        expect(tts.showTooltip()).toBeFalsy();
+        expect(tts.showTooltip(btn)).toBeFalsy();
+
+        expect(tts.cancelTooltip()).toBeFalsy();
+    });
+
+    // testing mouse events is tough
+
+    xit('should show a tooltip', function () {
+        var btn = d3.select('body').append('div').attr('id', 'foo');
+        // each is used to trigger a "mouse" event, providing this, d, and i
+        btn.each(function () {
+            tts.showTooltip(this, 'yay a tooltip');
+        });
+    });
+});