diff --git a/bigbluebutton-html5/imports/ui/components/common/button/component.jsx b/bigbluebutton-html5/imports/ui/components/common/button/component.jsx
index 12e559814e..c5327a48fd 100755
--- a/bigbluebutton-html5/imports/ui/components/common/button/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/common/button/component.jsx
@@ -123,6 +123,8 @@ export default class Button extends BaseButton {
       'aria-label': ariaLabel,
       'aria-expanded': ariaExpanded,
       tooltipLabel,
+      tooltipdelay,
+      tooltipplacement,
     } = this.props;
 
     const renderFuncName = circle ? 'renderCircle' : 'renderDefault';
@@ -132,6 +134,8 @@ export default class Button extends BaseButton {
       return (
         <TooltipContainer
           title={tooltipLabel || buttonLabel}
+          delay={tooltipdelay}
+          placement={tooltipplacement}
         >
           {this[renderFuncName]()}
         </TooltipContainer>
diff --git a/bigbluebutton-html5/imports/ui/components/common/tooltip/component.jsx b/bigbluebutton-html5/imports/ui/components/common/tooltip/component.jsx
index 41e6981fb8..c07d3905f3 100755
--- a/bigbluebutton-html5/imports/ui/components/common/tooltip/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/common/tooltip/component.jsx
@@ -57,9 +57,19 @@ class Tooltip extends Component {
     const {
       position,
       title,
+      delay,
+      placement,
     } = this.props;
 
     const { animations } = Settings.application;
+    
+    const overridePlacement = placement ? placement : position;
+    let overrideDelay;
+    if (animations) {
+      overrideDelay = delay ? [delay, ANIMATION_DELAY[1]] : ANIMATION_DELAY;
+    } else {
+      overrideDelay = delay ? [delay, 0] : [ANIMATION_DELAY[0], 0];
+    }
 
     const options = {
       aria: null,
@@ -69,14 +79,14 @@ class Tooltip extends Component {
       arrow: roundArrow,
       boundary: 'window',
       content: title,
-      delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
+      delay: overrideDelay,
       duration: animations ? ANIMATION_DURATION : 0,
       interactive: true,
       interactiveBorder: 10,
       onShow: this.onShow,
       onHide: this.onHide,
       offset: TIP_OFFSET,
-      placement: position,
+      placement: overridePlacement,
       touch: 'hold',
       theme: 'bbbtip',
       multiple: false,
@@ -101,12 +111,15 @@ class Tooltip extends Component {
       return true;
     }).forEach((e) => {
       const instance = e._tippy;
-      instance.setProps({
+      const newProps = {
         animation: animations
           ? DEFAULT_ANIMATION : ANIMATION_NONE,
-        delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
         duration: animations ? ANIMATION_DURATION : 0,
-      });
+      };
+      if (!e.getAttribute("delay")) {
+        newProps["delay"] = animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0];
+      }
+      instance.setProps(newProps);
     });
 
     const elem = document.getElementById(this.tippySelectorId);
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/pan-tool-injector/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/pan-tool-injector/component.jsx
index f2aac23c94..1fcb4c3daa 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/pan-tool-injector/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/pan-tool-injector/component.jsx
@@ -89,6 +89,8 @@ class PanToolInjector extends React.Component {
           size="md"
           label={label}
           aria-label={label}
+          tooltipdelay={700}
+          tooltipplacement="top"
           onClick={() => {
             setPanSelected(true);
             setIsPanning(true);