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
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index c9980ee..0f97fdd 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -21,7 +21,7 @@
'use strict';
// injected refs
- var $log, fs, is;
+ var $log, fs, is, tts;
// configuration
var btnSize = 25,
@@ -49,6 +49,11 @@
return btnSize + 2 * btnPadding;
}
+ function addTooltip(elem, tooltip) {
+ elem.on('mouseover', function () { tts.showTooltip(this, tooltip); });
+ elem.on('mouseout', function () { tts.cancelTooltip(this); });
+ }
+
// === BUTTON =================================================
@@ -64,6 +69,7 @@
cbFnc = fs.isF(cb) || noop;
is.loadIcon(btnDiv, gid, btnSize, true);
+ if (tooltip) { addTooltip(btnDiv, tooltip); }
btnDiv.on('click', cbFnc);
@@ -91,6 +97,7 @@
is.loadIcon(togDiv, gid, btnSize, true);
togDiv.classed('selected', sel);
+ if (tooltip) { addTooltip(togDiv, tooltip); }
function _toggle(b, nocb) {
sel = (b === undefined) ? !sel : !!b;
@@ -180,6 +187,7 @@
rbdiv.classed('selected', initSel);
rbdiv.on('click', rbclick);
is.loadIcon(rbdiv, btn.gid, btnSize, true);
+ if (btn.tooltip) { addTooltip(rbdiv, btn.tooltip); }
angular.extend(btn, {
el: rbdiv,
id: rid,
@@ -243,12 +251,13 @@
angular.module('onosWidget')
.factory('ButtonService',
- ['$log', 'FnService', 'IconService',
+ ['$log', 'FnService', 'IconService', 'TooltipService',
- function (_$log_, _fs_, _is_) {
+ function (_$log_, _fs_, _is_, _tts_) {
$log = _$log_;
fs = _fs_;
is = _is_;
+ tts = _tts_;
return {
button: button,
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.css b/web/gui/src/main/webapp/app/fw/widget/tooltip.css
new file mode 100644
index 0000000..f967793
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.css
@@ -0,0 +1,44 @@
+/*
+ * 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
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.js b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
new file mode 100644
index 0000000..b558b27
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
@@ -0,0 +1,97 @@
+/*
+ * 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
+ };
+ }]);
+}());