Toolbar Example: Add missing tooltips for issue 986

examples/toolbar/css/toolbar.css

@@ -42,6 +42,54 @@
   margin-right: 0.25em;
 }
 
+[role="toolbar"] button.popup {
+  position: relative;
+}
+
+[role="toolbar"] button .popup-label {
+  display: block;
+  width: initial;
+  border: 1px solid white;
+  padding: 2px 4px;
+  border-radius: 5px;
+  position: absolute;
+  top: -30000em;
+  background-color: black;
+  color: white;
+  font-weight: normal;
+}
+
+[role="toolbar"] button .popup-label.show {
+  text-align: center;
+  top: -2.5em;
+}
+
+[role="toolbar"] button .popup-label::after,
+[role="toolbar"] button .popup-label::before {
+  top: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+[role="toolbar"] button .popup-label::after {
+  border-color: rgba(0, 0, 0, 0);
+  border-top-color: #000;
+  border-width: 10px;
+  margin-left: -10px;
+}
+
+[role="toolbar"] button .popup-label::before {
+  border-color: rgba(255, 255, 255, 0);
+  border-top-color: #fff;
+  border-width: 12px;
+  margin-left: -12px;
+}
+
 [role="toolbar"] button[aria-pressed="true"],
 [role="toolbar"] [role="radio"][aria-checked="true"] {
   border-color: #555;

examples/toolbar/js/FontMenuButton.js

@@ -17,7 +17,7 @@ FontMenuButton = function (node, toolbar, toolbarItem) {
 
   this.keyCode = Object.freeze({
     'TAB': 9,
-    'RETURN': 13,
+    'ENTER': 13,
     'ESC': 27,
     'SPACE': 32,
     'UP': 38,
@@ -46,7 +46,7 @@ FontMenuButton.prototype.handleKeyDown = function (event) {
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
-    case this.keyCode.RETURN:
+    case this.keyCode.ENTER:
     case this.keyCode.DOWN:
     case this.keyCode.UP:
       this.fontMenu.open();

examples/toolbar/js/FontMenuItem.js

@@ -29,7 +29,7 @@ var FontMenuItem = function (domNode, fontMenu) {
 
   this.keyCode = Object.freeze({
     'TAB': 9,
-    'RETURN': 13,
+    'ENTER': 13,
     'ESC': 27,
     'SPACE': 32,
     'PAGEUP': 33,
@@ -86,7 +86,7 @@ FontMenuItem.prototype.handleKeydown = function (event) {
 
     switch (event.keyCode) {
       case this.keyCode.SPACE:
-      case this.keyCode.RETURN:
+      case this.keyCode.ENTER:
         this.handleClick(event);
         flag = true;
         break;

examples/toolbar/js/FormatToolbar.js

@@ -321,6 +321,11 @@ FormatToolbar.prototype.setFocusToLast = function (currentItem) {
   this.setFocusItem(this.lastItem);
 };
 
+FormatToolbar.prototype.hidePopupLabels = function () {
+  var tps = this.domNode.querySelectorAll('button .popup-label');
+  tps.forEach(function (tp) {tp.classList.remove('show');});
+};
+
 
 // Initialize toolbars
 

examples/toolbar/js/FormatToolbarItem.js

@@ -10,11 +10,14 @@ FormatToolbarItem = function (domNode, toolbar) {
   this.toolbar = toolbar;
   this.buttonAction = '';
   this.value = '';
+  this.popupLabelNode = null;
+  this.hasHover = false;
+  this.popupLabelDelay = 800;
 
 
   this.keyCode = Object.freeze({
     'TAB': 9,
-    'RETURN': 13,
+    'ENTER': 13,
     'ESC': 27,
     'SPACE': 32,
     'PAGEUP': 33,
@@ -33,6 +36,11 @@ FormatToolbarItem.prototype.init = function () {
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+  this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
+  this.domNode.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+
+  document.body.addEventListener('keydown', this.handleHideAllPopupLabels.bind(this));
+
 
   if (this.domNode.classList.contains('bold')) {
     this.buttonAction = 'bold';
@@ -81,6 +89,15 @@ FormatToolbarItem.prototype.init = function () {
   if (this.domNode.classList.contains('spinbutton')) {
     this.buttonAction = 'changeFontSize';
   }
+  // Initialize any popup label
+
+  this.popupLabelNode = this.domNode.querySelector('.popup-label');
+  if (this.popupLabelNode) {
+    var width = 8 * this.popupLabelNode.textContent.length;
+    this.popupLabelNode.style.width = width + 'px';
+    this.popupLabelNode.style.left = -1 * ((width - this.domNode.offsetWidth) / 2) - 5 + 'px';
+  }
+
 };
 
 FormatToolbarItem.prototype.isPressed = function () {
@@ -115,14 +132,45 @@ FormatToolbarItem.prototype.enable = function () {
   this.domNode.removeAttribute('aria-disabled');
 };
 
+FormatToolbarItem.prototype.showPopupLabel = function () {
+  if (this.popupLabelNode) {
+    this.toolbar.hidePopupLabels();
+    this.popupLabelNode.classList.add('show');
+  }
+};
+
+FormatToolbarItem.prototype.hidePopupLabel = function () {
+  if (this.popupLabelNode && !this.hasHover) {
+    this.popupLabelNode.classList.remove('show');
+  }
+};
+
+
 // Events
 
+FormatToolbarItem.prototype.handleHideAllPopupLabels = function (event) {
+
+  switch (event.keyCode) {
+
+    case this.keyCode.ESC:
+      this.toolbar.hidePopupLabels();
+      break;
+
+    default:
+      break;
+  }
+
+
+};
+
+
 FormatToolbarItem.prototype.handleBlur = function (event) {
   this.toolbar.domNode.classList.remove('focus');
 
   if (this.domNode.classList.contains('nightmode')) {
     this.domNode.parentNode.classList.remove('focus');
   }
+  this.hidePopupLabel();
 };
 
 FormatToolbarItem.prototype.handleFocus = function (event) {
@@ -131,15 +179,25 @@ FormatToolbarItem.prototype.handleFocus = function (event) {
   if (this.domNode.classList.contains('nightmode')) {
     this.domNode.parentNode.classList.add('focus');
   }
+  this.showPopupLabel();
+};
+
+FormatToolbarItem.prototype.handleMouseLeave = function (event) {
+  this.hasHover = false;
+  setTimeout(this.hidePopupLabel.bind(this), this.popupLabelDelay);
+};
 
+FormatToolbarItem.prototype.handleMouseOver = function (event) {
+  this.showPopupLabel();
+  this.hasHover = true;
 };
 
 FormatToolbarItem.prototype.handleKeyDown = function (event) {
   var flag = false;
 
   switch (event.keyCode) {
 
-    case this.keyCode.RETURN:
+    case this.keyCode.ENTER:
     case this.keyCode.SPACE:
       if ((this.buttonAction !== '') &&
         (this.buttonAction !== 'bold') &&