code: function () {
          var toolbarHeight = $toolbar[0].offsetHeight;
          var toolbarWidth = $toolbar[0].offsetWidth;
          var spacing = 5;
          var selection = window.getSelection();
          var range = selection.getRangeAt(0);
          var boundary = range.getBoundingClientRect();
  
          var topPosition = boundary.top;
          var leftPosition = boundary.left;
  
          // if there isn't enough space at the top, place it at the bottom
          // of the selection
          if(boundary.top < (toolbarHeight + spacing)) {
            scope.position.top = topPosition + boundary.height + spacing;
            // tell me if it's above or below the selection
            // used in the template to place the triangle above or below
            scope.position.below = true;
          } else {
            scope.position.top = topPosition - toolbarHeight - spacing;
            scope.position.below = false;
          }
  
          // center toolbar above selected text
          scope.position.left = leftPosition - (toolbarWidth/2) + (boundary.width/2);
  
          // cross-browser window scroll positions
          var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
          var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  
          // add the scroll positions
          // because getBoundingClientRect gives us the position
          // relative to the viewport, not to the page
          scope.position.top += scrollTop;
          scope.position.left += scrollLeft;
  
          return this;
        }
docs: position the toolbar above or below the selected text