From 43686b4d7b0dc902934107035d0c3b2eb79582bd Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sat, 2 Apr 2022 12:20:08 +0100
Subject: [PATCH] Fixed #2360 - React 18 support for Tooltip

---
 components/lib/autocomplete/AutoComplete.js   |  49 ++--
 components/lib/button/Button.js               |  44 +--
 components/lib/calendar/Calendar.js           |  34 +--
 components/lib/checkbox/Checkbox.js           |  45 +--
 components/lib/chips/Chips.js                 |  35 +--
 components/lib/colorpicker/ColorPicker.js     |  47 ++--
 components/lib/dropdown/Dropdown.js           |  59 ++--
 components/lib/inputmask/InputMask.js         |  30 +-
 components/lib/inputnumber/InputNumber.js     |  39 +--
 components/lib/inputswitch/InputSwitch.js     |  46 +---
 components/lib/inputtext/InputText.js         |  34 +--
 components/lib/inputtextarea/InputTextarea.js |  32 +--
 components/lib/listbox/ListBox.js             |  46 +---
 components/lib/multiselect/MultiSelect.js     |  63 ++---
 .../multistatecheckbox/MultiStateCheckbox.js  |  47 +---
 components/lib/password/Password.js           |  29 +-
 components/lib/radiobutton/RadioButton.js     |  44 +--
 components/lib/rating/Rating.js               |  38 +--
 components/lib/selectbutton/SelectButton.js   |  38 +--
 components/lib/splitbutton/SplitButton.js     |  57 ++--
 components/lib/togglebutton/ToggleButton.js   |  44 +--
 components/lib/tooltip/Tooltip.js             |  46 +---
 .../lib/tristatecheckbox/TriStateCheckbox.js  |  44 +--
 components/lib/utils/DomHandler.js            | 256 +++++++++---------
 24 files changed, 419 insertions(+), 827 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 3b58ad814b..57d31ef69b 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -1,12 +1,12 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact from '../api/Api';
-import { AutoCompletePanel } from './AutoCompletePanel';
-import { InputText } from '../inputtext/InputText';
 import { Button } from '../button/Button';
-import { tip } from '../tooltip/Tooltip';
+import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, UniqueComponentId, ZIndexUtils, IconUtils } from '../utils/Utils';
-import { useMountEffect, useUpdateEffect, useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { AutoCompletePanel } from './AutoCompletePanel';
 
 export const AutoComplete = memo(forwardRef((props, ref) => {
     const [idState, setIdState] = useState(props.id);
@@ -15,7 +15,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     const [overlayVisibleState, setOverlayVisibleState] = useState(false);
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
-    const tooltipRef = useRef(null);
     const inputRef = useRef(props.inputRef);
     const multiContainerRef = useRef(null);
     const virtualScrollerRef = useRef(null);
@@ -414,19 +413,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -455,11 +441,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
             clearTimeout(timeout.current);
         }
 
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-
         ZIndexUtils.clear(overlayRef.current);
     });
 
@@ -555,6 +536,7 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     }
 
     const listId = idState + '_list';
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-autocomplete p-component p-inputwrapper', {
         'p-autocomplete-dd': props.dropdown,
         'p-autocomplete-multiple': props.multiple,
@@ -566,14 +548,17 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     const dropdown = createDropdown();
 
     return (
-        <span {...ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
-            {input}
-            {loader}
-            {dropdown}
-            <AutoCompletePanel ref={overlayRef} virtualScrollerRef={virtualScrollerRef} {...props} listId={listId} onItemClick={selectItem} selectedItem={selectedItem}
-                onClick={onPanelClick} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupChildren={getOptionGroupChildren}
-                in={overlayVisibleState} onEnter={onOverlayEnter} onEntering={onOverlayEntering} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
-        </span>
+        <>
+            <span {...ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
+                {input}
+                {loader}
+                {dropdown}
+                <AutoCompletePanel ref={overlayRef} virtualScrollerRef={virtualScrollerRef} {...props} listId={listId} onItemClick={selectItem} selectedItem={selectedItem}
+                    onClick={onPanelClick} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupChildren={getOptionGroupChildren}
+                    in={overlayVisibleState} onEnter={onOverlayEnter} onEntering={onOverlayEntering} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
+            </span>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 0de930ccbf..7add632609 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -1,37 +1,15 @@
 import React, { forwardRef, memo, useEffect, useRef } from 'react';
-import { tip } from '../tooltip/Tooltip';
 import { Ripple } from '../ripple/Ripple';
-import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Button = memo(forwardRef((props, ref) => {
     const elementRef = useRef(ref);
-    const tooltipRef = useRef(null);
 
     useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createIcon = () => {
         const icon = props.loading ? props.loadingIcon : props.icon;
         const className = classNames('p-button-icon p-c', {
@@ -60,6 +38,7 @@ export const Button = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const disabled = props.disabled || props.loading;
     const buttonProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
     const className = classNames('p-button p-component', props.className, {
@@ -76,13 +55,16 @@ export const Button = memo(forwardRef((props, ref) => {
     const badge = createBadge();
 
     return (
-        <button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
-            {icon}
-            {label}
-            {props.children}
-            {badge}
-            <Ripple />
-        </button>
+        <>
+            <button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
+                {icon}
+                {label}
+                {props.children}
+                {badge}
+                <Ripple />
+            </button>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 46fd2fc8d4..36ad317e70 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact, { localeOption, localeOptions } from '../api/Api';
-import { CalendarPanel } from './CalendarPanel';
-import { InputText } from '../inputtext/InputText';
 import { Button } from '../button/Button';
-import { tip } from '../tooltip/Tooltip';
-import { Ripple } from '../ripple/Ripple';
+import { useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, mask, ZIndexUtils } from '../utils/Utils';
-import { useMountEffect, useUnmountEffect, useUpdateEffect, useOverlayListener, usePrevious } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, mask, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { CalendarPanel } from './CalendarPanel';
 
 export const Calendar = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
@@ -16,7 +15,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const navigation = useRef(null);
     const ignoreFocusFunctionality = useRef(false);
     const isKeydown = useRef(false);
@@ -2192,19 +2190,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: inputRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         let viewDate = getViewDate(props.viewDate);
         validateDate(viewDate);
@@ -2270,11 +2255,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
             touchUIMask.current = null;
         }
 
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-
         ZIndexUtils.clear(overlayRef.current);
     });
 
@@ -2746,7 +2726,8 @@ export const Calendar = memo(forwardRef((props, ref) => {
             return (
                 <InputText ref={inputRef} id={props.inputId} name={props.name} type="text" className={props.inputClassName} style={props.inputStyle}
                     readOnly={props.readOnlyInput} disabled={props.disabled} required={props.required} autoComplete="off" placeholder={props.placeholder} tabIndex={props.tabIndex}
-                    onInput={onUserInput} onFocus={onInputFocus} onBlur={onInputBlur} onKeyDown={onInputKeyDown} aria-labelledby={props.ariaLabelledBy} inputMode={props.inputMode} />
+                    onInput={onUserInput} onFocus={onInputFocus} onBlur={onInputBlur} onKeyDown={onInputKeyDown} aria-labelledby={props.ariaLabelledBy} inputMode={props.inputMode}
+                    tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
             )
         }
 
@@ -2813,6 +2794,7 @@ export const Calendar = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-calendar p-component p-inputwrapper', props.className, {
         [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
         'p-calendar-disabled': props.disabled,
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index d1c0417dd0..009f4c7778 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { useUpdateEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
-import { useUpdateEffect, useUnmountEffect } from '../hooks/Hooks';
 
 export const Checkbox = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
 
     const onClick = (event) => {
         if (!props.disabled && !props.readOnly && props.onChange) {
@@ -59,31 +58,12 @@ export const Checkbox = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useUpdateEffect(() => {
         inputRef.current.checked = isChecked();
     }, [props.checked, props.trueValue]);
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const checked = isChecked();
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-checkbox p-component', {
         'p-checkbox-checked': checked,
         'p-checkbox-disabled': props.disabled,
@@ -97,15 +77,18 @@ export const Checkbox = memo(forwardRef((props, ref) => {
     const icon = IconUtils.getJSXIcon(checked && props.icon, { className: 'p-checkbox-icon p-c' }, { props, checked });
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
-                    onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />
-            </div>
-            <div className={boxClass} role="checkbox" aria-checked={checked}>
-                {icon}
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
+                        onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />
+                </div>
+                <div className={boxClass} role="checkbox" aria-checked={checked}>
+                    {icon}
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index fdce438912..441e890198 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -1,14 +1,12 @@
 import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const Chips = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
 
     const removeItem = (event, index) => {
         if (props.disabled && props.readOnly) {
@@ -157,27 +155,6 @@ export const Chips = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: inputRef.current,
-                targetContainer: listRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createRemoveIcon = (value, index) => {
         if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
             return <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => removeItem(event, index)}></span>
@@ -229,6 +206,7 @@ export const Chips = memo(forwardRef((props, ref) => {
         )
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-chips p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState
@@ -236,9 +214,12 @@ export const Chips = memo(forwardRef((props, ref) => {
     const list = createList();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
-            {list}
-        </div>
+        <>
+            <div ref={elementRef} id={props.id} className={className} style={props.style}>
+                {list}
+            </div>
+            {hasTooltip && <Tooltip target={inputRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 5fcc4969a6..a2d06bd52a 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -1,17 +1,16 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import PrimeReact from '../api/Api';
-import { ColorPickerPanel } from './ColorPickerPanel';
-import { tip } from '../tooltip/Tooltip';
+import { useEventListener, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, ZIndexUtils } from '../utils/Utils';
-import { useUnmountEffect, useEventListener, useOverlayListener, useUpdateEffect, useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { ColorPickerPanel } from './ColorPickerPanel';
 
 export const ColorPicker = memo(forwardRef((props, ref) => {
     const [overlayVisibleState, setOverlayVisibleState] = useState(false);
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const colorSelectorRef = useRef(null);
     const colorHandleRef = useRef(null);
     const hueHandleRef = useRef(null);
@@ -442,19 +441,6 @@ export const ColorPicker = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         updateHSBValue(props.value);
         updateUI();
@@ -471,11 +457,6 @@ export const ColorPicker = memo(forwardRef((props, ref) => {
     });
 
     useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-
         ZIndexUtils.clear(overlayRef.current);
     });
 
@@ -528,6 +509,7 @@ export const ColorPicker = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-colorpicker p-component', {
         'p-colorpicker-overlay': !props.inline
     }, props.className);
@@ -535,14 +517,17 @@ export const ColorPicker = memo(forwardRef((props, ref) => {
     const input = createInput();
 
     return (
-        <div ref={elementRef} id={props.id} style={props.style} className={className}>
-            {input}
-            <ColorPickerPanel ref={overlayRef} appendTo={props.appendTo} inline={props.inline} disabled={props.disabled} onClick={onPanelClick}
-                in={props.inline || overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
-                transitionOptions={props.transitionOptions}>
-                {content}
-            </ColorPickerPanel>
-        </div>
+        <>
+            <div ref={elementRef} id={props.id} style={props.style} className={className}>
+                {input}
+                <ColorPickerPanel ref={overlayRef} appendTo={props.appendTo} inline={props.inline} disabled={props.disabled} onClick={onPanelClick}
+                    in={props.inline || overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
+                    transitionOptions={props.transitionOptions}>
+                    {content}
+                </ColorPickerPanel>
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 91064636bb..51241b6778 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1,10 +1,10 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import PrimeReact, { FilterService } from '../api/Api';
-import { DropdownPanel } from './DropdownPanel';
-import { tip } from '../tooltip/Tooltip';
+import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, ZIndexUtils } from '../utils/Utils';
-import { useMountEffect, useUpdateEffect, useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DropdownPanel } from './DropdownPanel';
 
 export const Dropdown = memo(forwardRef((props, ref) => {
     const [filterState, setFilterState] = useState('');
@@ -13,7 +13,6 @@ export const Dropdown = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const focusInputRef = useRef(null);
     const searchTimeout = useRef(null);
     const searchValue = useRef(null);
@@ -553,19 +552,6 @@ export const Dropdown = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         if (props.autoFocus && focusInputRef.current) {
             focusInputRef.current.focus();
@@ -597,11 +583,6 @@ export const Dropdown = memo(forwardRef((props, ref) => {
 
     useUnmountEffect(() => {
         ZIndexUtils.clear(overlayRef.current);
-
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
     });
 
     const createHiddenSelect = () => {
@@ -673,6 +654,7 @@ export const Dropdown = memo(forwardRef((props, ref) => {
     const visibleOptions = getVisibleOptions();
     const selectedOption = getSelectedOption();
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-dropdown p-component p-inputwrapper', {
         'p-disabled': props.disabled,
         'p-focus': focusedState,
@@ -687,20 +669,23 @@ export const Dropdown = memo(forwardRef((props, ref) => {
     const clearIcon = createClearIcon();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Dropdown.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
-            onMouseDown={props.onMouseDown} onContextMenu={props.onContextMenu}>
-            {keyboardHelper}
-            {hiddenSelect}
-            {labelElement}
-            {clearIcon}
-            {dropdownIcon}
-            <DropdownPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} appendTo={appendTo} onClick={onPanelClick} onOptionClick={onOptionClick}
-                filterValue={filterState} hasFilter={hasFilter} onFilterClearIconClick={onFilterClearIconClick} onFilterInputKeyDown={onFilterInputKeyDown} onFilterInputChange={onFilterInputChange}
-                getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
-                getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
-                isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex}
-                in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
-        </div>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, Dropdown.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
+                onMouseDown={props.onMouseDown} onContextMenu={props.onContextMenu}>
+                {keyboardHelper}
+                {hiddenSelect}
+                {labelElement}
+                {clearIcon}
+                {dropdownIcon}
+                <DropdownPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} appendTo={appendTo} onClick={onPanelClick} onOptionClick={onOptionClick}
+                    filterValue={filterState} hasFilter={hasFilter} onFilterClearIconClick={onFilterClearIconClick} onFilterInputKeyDown={onFilterInputKeyDown} onFilterInputChange={onFilterInputChange}
+                    getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
+                    getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
+                    isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex}
+                    in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 02a7149788..e14e992efb 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -1,12 +1,10 @@
 import React, { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
+import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
-import { tip } from '../tooltip/Tooltip';
-import { DomHandler, classNames, ObjectUtils } from '../utils/Utils';
-import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputMask = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
     const firstNonMaskPos = useRef(null);
     const lastRequiredNonMaskPos = useRef(0);
     const tests = useRef([]);
@@ -510,19 +508,6 @@ export const InputMask = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(elementRef, props.inputRef);
     }, [elementRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         init();
         updateValue();
@@ -540,20 +525,13 @@ export const InputMask = memo(forwardRef((props, ref) => {
         }
     }, [isValueUpdated]);
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const className = classNames('p-inputmask', props.className);
 
     return (
         <InputText ref={elementRef} id={props.id} type={props.type} name={props.name} style={props.style} className={className} placeholder={props.placeholder}
             size={props.size} maxLength={props.maxLength} tabIndex={props.tabIndex} disabled={props.disabled} readOnly={props.readOnly}
-            onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onKeyPress={onKeyPress}
-            onInput={onInput} onPaste={handleInputChange} required={props.required} aria-labelledby={props.ariaLabelledBy} />
+            onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onKeyPress={onKeyPress} onInput={onInput} onPaste={handleInputChange}
+            required={props.required} aria-labelledby={props.ariaLabelledBy} tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
     )
 }));
 
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 688d8cf56a..bc99fddc1f 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -1,15 +1,14 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
-import { Ripple } from '../ripple/Ripple';
+import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
+import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { useMountEffect, useUpdateEffect, useUnmountEffect } from '../hooks/Hooks';
 
 export const InputNumber = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(null);
-    const tooltipRef = useRef(null);
     const timer = useRef(null);
     const lastValue = useRef(null);
 
@@ -911,19 +910,6 @@ export const InputNumber = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         constructParser();
 
@@ -942,13 +928,6 @@ export const InputNumber = memo(forwardRef((props, ref) => {
         changeValue();
     }, [props.value]);
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createInputElement = () => {
         const className = classNames('p-inputnumber-input', props.inputClassName);
         const valueToRender = formattedValue(props.value);
@@ -1015,6 +994,7 @@ export const InputNumber = memo(forwardRef((props, ref) => {
         )
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-inputnumber p-component p-inputwrapper', {
         'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
         'p-inputwrapper-focus': focusedState,
@@ -1026,10 +1006,13 @@ export const InputNumber = memo(forwardRef((props, ref) => {
     const buttonGroup = createButtonGroup();
 
     return (
-        <span ref={elementRef} id={props.id} className={className} style={props.style}>
-            {inputElement}
-            {buttonGroup}
-        </span>
+        <>
+            <span ref={elementRef} id={props.id} className={className} style={props.style}>
+                {inputElement}
+                {buttonGroup}
+            </span>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index 132a11c94c..c9ce6057cb 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -1,13 +1,11 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
-import { ObjectUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const InputSwitch = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const checked = props.checked === props.trueValue;
 
     const onClick = (event) => {
@@ -59,26 +57,7 @@ export const InputSwitch = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-inputswitch p-component', {
         'p-inputswitch-checked': checked,
         'p-disabled': props.disabled,
@@ -88,15 +67,18 @@ export const InputSwitch = memo(forwardRef((props, ref) => {
     const inputSwitchProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
-            role="checkbox" aria-checked={checked} {...inputSwitchProps}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} checked={checked} onChange={toggle}
-                    onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} disabled={props.disabled} role="switch" aria-checked={checked}
-                    aria-labelledby={props.ariaLabelledBy} />
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
+                role="checkbox" aria-checked={checked} {...inputSwitchProps}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} checked={checked} onChange={toggle}
+                        onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} disabled={props.disabled} role="switch" aria-checked={checked}
+                        aria-labelledby={props.ariaLabelledBy} />
+                </div>
+                <span className="p-inputswitch-slider"></span>
             </div>
-            <span className="p-inputswitch-slider"></span>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 4cc67eb489..add0bbb089 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -1,12 +1,10 @@
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { KeyFilter } from '../keyfilter/KeyFilter';
-import { tip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputText = memo(forwardRef((props, ref) => {
     const elementRef = useRef(ref);
-    const tooltipRef = useRef(null);
 
     const onKeyPress = (event) => {
         props.onKeyPress && props.onKeyPress(event);
@@ -38,33 +36,19 @@ export const InputText = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const inputProps = ObjectUtils.findDiffKeys(props, InputText.defaultProps);
     const className = classNames('p-inputtext p-component', {
         'p-disabled': props.disabled,
         'p-filled': isFilled
     }, props.className);
 
-    return <input ref={elementRef} {...inputProps} className={className} onInput={onInput} onKeyPress={onKeyPress} />;
+    return (
+        <>
+            <input ref={elementRef} {...inputProps} className={className} onInput={onInput} onKeyPress={onKeyPress} />
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
+    )
 }));
 
 InputText.defaultProps = {
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 8919b15e8d..3e93ea4e08 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -1,11 +1,9 @@
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { tip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputTextarea = memo(forwardRef((props, ref) => {
     const elementRef = useRef(ref);
-    const tooltipRef = useRef(null);
     const cachedScrollHeight = useRef(0);
 
     const onFocus = (event) => {
@@ -77,32 +75,13 @@ export const InputTextarea = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useEffect(() => {
         if (props.autoResize) {
             resize(true);
         }
     }, [props.autoResize]);
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const textareaProps = ObjectUtils.findDiffKeys(props, InputTextarea.defaultProps);
     const className = classNames('p-inputtextarea p-inputtext p-component', {
         'p-disabled': props.disabled,
@@ -111,7 +90,10 @@ export const InputTextarea = memo(forwardRef((props, ref) => {
     }, props.className);
 
     return (
-        <textarea ref={elementRef} {...textareaProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onInput={onInput}></textarea>
+        <>
+            <textarea ref={elementRef} {...textareaProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onInput={onInput}></textarea>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 4d993d866a..e178008b4a 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -1,16 +1,14 @@
-import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, memo, useRef, useState } from 'react';
 import { FilterService } from '../api/Api';
-import { ListBoxItem } from './ListBoxItem';
-import { ListBoxHeader } from './ListBoxHeader';
-import { tip } from '../tooltip/Tooltip';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
-import { ObjectUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { ListBoxHeader } from './ListBoxHeader';
+import { ListBoxItem } from './ListBoxItem';
 
 export const ListBox = memo(forwardRef((props, ref) => {
     const [filterValueState, setFilterValueState] = useState('');
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
     const virtualScrollerRef = useRef(null);
     const optionTouched = useRef(false);
     const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
@@ -212,26 +210,6 @@ export const ListBox = memo(forwardRef((props, ref) => {
         }
     }
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createHeader = () => {
         return props.filter ? <ListBoxHeader filter={filteredValue} onFilter={onFilter} disabled={props.disabled} filterPlaceholder={props.filterPlaceholder} /> : null;
     }
@@ -320,6 +298,7 @@ export const ListBox = memo(forwardRef((props, ref) => {
 
     const visibleOptions = getVisibleOptions();
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-listbox p-component', {
         'p-disabled': props.disabled
     }, props.className);
@@ -328,12 +307,15 @@ export const ListBox = memo(forwardRef((props, ref) => {
     const header = createHeader();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, ListBox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
-            {header}
-            <div className={listClassName} style={props.listStyle}>
-                {list}
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, ListBox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
+                {header}
+                <div className={listClassName} style={props.listStyle}>
+                    {list}
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index e5632df5fe..28cb36e1f1 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1,10 +1,10 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import PrimeReact, { FilterService } from '../api/Api';
-import { tip } from '../tooltip/Tooltip';
-import { MultiSelectPanel } from './MultiSelectPanel';
+import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, ZIndexUtils, classNames, IconUtils } from '../utils/Utils';
-import { useUpdateEffect, useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { MultiSelectPanel } from './MultiSelectPanel';
 
 export const MultiSelect = memo(forwardRef((props, ref) => {
     const [filterState, setFilterState] = useState('');
@@ -14,7 +14,6 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
     const inputRef = useRef(props.inputRef);
     const labelRef = useRef(null);
     const overlayRef = useRef(null);
-    const tooltipRef = useRef(null);
     const hasFilter = filterState && filterState.trim().length > 0;
     const empty = ObjectUtils.isEmpty(props.value);
     const equalityKey = props.optionValue ? null : props.dataKey;
@@ -505,19 +504,6 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useUpdateEffect(() => {
         if (overlayVisibleState && hasFilter) {
             alignOverlay();
@@ -526,11 +512,6 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
 
     useUnmountEffect(() => {
         ZIndexUtils.clear(overlayRef.current);
-
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
     });
 
     const createClearIcon = () => {
@@ -558,6 +539,7 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
 
     const visibleOptions = getVisibleOptions();
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': props.display === 'chip',
         'p-disabled': props.disabled,
@@ -570,23 +552,26 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
     const clearIcon = createClearIcon();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps)} ref={elementRef} id={props.id} className={className} onClick={onClick} style={props.style}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} id={props.inputId} name={props.name} readOnly type="text" onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
-                    role="listbox" aria-labelledby={props.ariaLabelledBy} aria-expanded={overlayVisibleState} disabled={props.disabled} tabIndex={props.tabIndex} />
-            </div>
-            {label}
-            {clearIcon}
-            <div className="p-multiselect-trigger">
-                {IconUtils.getJSXIcon(props.dropdownIcon, { className: 'p-multiselect-trigger-icon p-c' }, { props })}
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps)} ref={elementRef} id={props.id} className={className} onClick={onClick} style={props.style}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} id={props.inputId} name={props.name} readOnly type="text" onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
+                        role="listbox" aria-labelledby={props.ariaLabelledBy} aria-expanded={overlayVisibleState} disabled={props.disabled} tabIndex={props.tabIndex} />
+                </div>
+                {label}
+                {clearIcon}
+                <div className="p-multiselect-trigger">
+                    {IconUtils.getJSXIcon(props.dropdownIcon, { className: 'p-multiselect-trigger-icon p-c' }, { props })}
+                </div>
+                <MultiSelectPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} onClick={onPanelClick} onOverlayHide={hide}
+                    filterValue={filterState} hasFilter={hasFilter} onFilterInputChange={onFilterInputChange} onCloseClick={onCloseClick} onSelectAll={onSelectAll}
+                    getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
+                    getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
+                    isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex} isAllSelected={isAllSelected} onOptionSelect={onOptionSelect} allowOptionSelect={allowOptionSelect} onOptionKeyDown={onOptionKeyDown}
+                    in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
             </div>
-            <MultiSelectPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} onClick={onPanelClick} onOverlayHide={hide}
-                filterValue={filterState} hasFilter={hasFilter} onFilterInputChange={onFilterInputChange} onCloseClick={onCloseClick} onSelectAll={onSelectAll}
-                getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
-                getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
-                isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex} isAllSelected={isAllSelected} onOptionSelect={onOptionSelect} allowOptionSelect={allowOptionSelect} onOptionKeyDown={onOptionKeyDown}
-                in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index bc1c38678f..f053d90e22 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
-import { ObjectUtils, classNames } from '../utils/Utils';
-import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
+import { useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const MultiStateCheckbox = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const equalityKey = props.optionValue ? null : props.dataKey;
 
     const onClick = (event) => {
@@ -70,32 +69,12 @@ export const MultiStateCheckbox = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         if (!props.empty && props.value === null) {
             toggle();
         }
     });
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createIcon = () => {
         const icon = (selectedOption && selectedOption.icon) || '';
         const className = classNames('p-checkbox-icon p-c', {
@@ -119,6 +98,7 @@ export const MultiStateCheckbox = memo(forwardRef((props, ref) => {
 
     const { option: selectedOption, index: selectedOptionIndex } = getSelectedOptionMap();
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-multistatecheckbox p-checkbox p-component', props.className);
     const boxClassName = classNames('p-checkbox-box', {
         'p-highlight': !!selectedOption,
@@ -128,15 +108,18 @@ export const MultiStateCheckbox = memo(forwardRef((props, ref) => {
     const icon = createIcon();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, MultiStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
-                    onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} defaultChecked={!!selectedOption} />
-            </div>
-            <div className={boxClassName} role="checkbox" aria-checked={!!selectedOption} style={selectedOption && selectedOption.style}>
-                {icon}
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, MultiStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
+                        onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} defaultChecked={!!selectedOption} />
+                </div>
+                <div className={boxClassName} role="checkbox" aria-checked={!!selectedOption} style={selectedOption && selectedOption.style}>
+                    {icon}
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index d0e3321325..5430c98504 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -1,12 +1,11 @@
 import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import PrimeReact, { localeOption } from '../api/Api';
-import { tip } from '../tooltip/Tooltip';
-import { InputText } from '../inputtext/InputText';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 
 export const Password = memo(forwardRef((props, ref) => {
     const promptLabel = props.promptLabel || localeOption('passwordPrompt');
@@ -22,7 +21,6 @@ export const Password = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const mediumCheckRegExp = useRef(new RegExp(props.mediumRegex));
     const strongCheckRegExp = useRef(new RegExp(props.strongRegex));
     const type = unmaskedState ? 'text' : 'password';
@@ -214,19 +212,6 @@ export const Password = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: inputRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useEffect(() => {
         mediumCheckRegExp.current = new RegExp(props.mediumRegex);
     }, [props.mediumRegex]);
@@ -243,11 +228,6 @@ export const Password = memo(forwardRef((props, ref) => {
 
     useUnmountEffect(() => {
         ZIndexUtils.clear(overlayRef.current);
-
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
     });
 
     const createIcon = () => {
@@ -302,6 +282,7 @@ export const Password = memo(forwardRef((props, ref) => {
         return <Portal element={panel} appendTo={props.appendTo} />;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-password p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState,
@@ -315,7 +296,7 @@ export const Password = memo(forwardRef((props, ref) => {
     return (
         <div ref={elementRef} id={props.id} className={className} style={props.style}>
             <InputText ref={inputRef} id={props.inputId} {...inputProps} type={type} className={inputClassName} style={props.inputStyle}
-                onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyup} onInput={onInput} />
+                onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyup} onInput={onInput} tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
             {icon}
             {panel}
         </div>
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index 67ea188c5a..41db8576ba 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -1,13 +1,11 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const RadioButton = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
 
     const select = (e) => {
         inputRef.current.checked = true;
@@ -53,30 +51,11 @@ export const RadioButton = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     useImperativeHandle(ref, () => ({
         select
     }));
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-radiobutton p-component', {
         'p-radiobutton-checked': props.checked,
         'p-radiobutton-disabled': props.disabled,
@@ -89,15 +68,18 @@ export const RadioButton = memo(forwardRef((props, ref) => {
     });
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, RadioButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} id={props.inputId} type="radio" aria-labelledby={props.ariaLabelledBy} name={props.name} defaultChecked={props.checked}
-                    onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} required={props.required} tabIndex={props.tabIndex} />
-            </div>
-            <div className={boxClassName} role="radio" aria-checked={props.checked}>
-                <div className="p-radiobutton-icon"></div>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, RadioButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} id={props.inputId} type="radio" aria-labelledby={props.ariaLabelledBy} name={props.name} defaultChecked={props.checked}
+                        onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} required={props.required} tabIndex={props.tabIndex} />
+                </div>
+                <div className={boxClassName} role="radio" aria-checked={props.checked}>
+                    <div className="p-radiobutton-icon"></div>
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 29b0335774..da236ce1ff 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -1,11 +1,9 @@
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import React, { forwardRef, memo, useRef } from 'react';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const Rating = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
     const enabled = !props.disabled && !props.readOnly;
     const tabIndex = enabled ? 0 : null;
 
@@ -57,26 +55,6 @@ export const Rating = memo(forwardRef((props, ref) => {
         }
     }
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createStars = () => {
         return Array.from({ length: props.stars }, (_, i) => i + 1).map((value) => {
             const iconClassName = classNames('p-rating-icon', {
@@ -98,6 +76,7 @@ export const Rating = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-rating', {
         'p-disabled': props.disabled,
         'p-readonly': props.readOnly
@@ -106,10 +85,13 @@ export const Rating = memo(forwardRef((props, ref) => {
     const stars = createStars();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Rating.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
-            {cancelIcon}
-            {stars}
-        </div>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, Rating.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
+                {cancelIcon}
+                {stars}
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 0e21df2d3f..9e9e315219 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -1,12 +1,10 @@
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import React, { forwardRef, memo, useRef } from 'react';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { SelectButtonItem } from './SelectButtonItem';
-import { tip } from '../tooltip/Tooltip';
-import { ObjectUtils, classNames } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const SelectButton = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
 
     const onOptionClick = (event) => {
         if (props.disabled || isOptionDisabled(event.option)) {
@@ -75,26 +73,6 @@ export const SelectButton = memo(forwardRef((props, ref) => {
         return false;
     }
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createItems = () => {
         if (props.options && props.options.length) {
             return props.options.map((option, index) => {
@@ -112,13 +90,17 @@ export const SelectButton = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-selectbutton p-buttonset p-component', props.className);
     const items = createItems();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, SelectButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} role="group">
-            {items}
-        </div>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, SelectButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} role="group">
+                {items}
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index d49804808f..805e2122e8 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -1,12 +1,12 @@
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact from '../api/Api';
-import { SplitButtonItem } from './SplitButtonItem';
-import { SplitButtonPanel } from './SplitButtonPanel';
 import { Button } from '../button/Button';
-import { tip } from '../tooltip/Tooltip';
+import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
-import { useMountEffect, useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { SplitButtonItem } from './SplitButtonItem';
+import { SplitButtonPanel } from './SplitButtonPanel';
 
 export const SplitButton = memo(forwardRef((props, ref) => {
     const [idState, setIdState] = useState(props.id);
@@ -14,7 +14,6 @@ export const SplitButton = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
     const defaultButtonRef = useRef(null);
     const overlayRef = useRef(null);
-    const tooltipRef = useRef(null);
 
     const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
         target: elementRef, overlay: overlayRef, listener: (event, { valid }) => {
@@ -70,19 +69,6 @@ export const SplitButton = memo(forwardRef((props, ref) => {
         DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
     }
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -91,11 +77,6 @@ export const SplitButton = memo(forwardRef((props, ref) => {
 
     useUnmountEffect(() => {
         ZIndexUtils.clear(overlayRef.current);
-
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
     });
 
     useImperativeHandle(ref, () => ({
@@ -113,6 +94,7 @@ export const SplitButton = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-splitbutton p-component', props.className, { 'p-disabled': props.disabled });
     const buttonClassName = classNames('p-splitbutton-defaultbutton', props.buttonClassName);
     const menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
@@ -121,17 +103,20 @@ export const SplitButton = memo(forwardRef((props, ref) => {
     const panelId = idState + '_overlay';
 
     return (
-        <div id={idState} className={className} style={props.style} ref={elementRef}>
-            <Button ref={defaultButtonRef} type="button" className={buttonClassName} icon={props.icon} label={props.label} onClick={props.onClick} disabled={props.disabled} tabIndex={props.tabIndex}>
-                {buttonContent}
-            </Button>
-            <Button type="button" className={menuButtonClassName} icon={props.dropdownIcon} onClick={onDropdownButtonClick} disabled={props.disabled}
-                aria-expanded={overlayVisibleState} aria-haspopup aria-owns={panelId} />
-            <SplitButtonPanel ref={overlayRef} appendTo={props.appendTo} id={panelId} menuStyle={props.menuStyle} menuClassName={props.menuClassName} onClick={onPanelClick}
-                in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} transitionOptions={props.transitionOptions}>
-                {items}
-            </SplitButtonPanel>
-        </div>
+        <>
+            <div id={idState} className={className} style={props.style} ref={elementRef}>
+                <Button ref={defaultButtonRef} type="button" className={buttonClassName} icon={props.icon} label={props.label} onClick={props.onClick} disabled={props.disabled} tabIndex={props.tabIndex}>
+                    {buttonContent}
+                </Button>
+                <Button type="button" className={menuButtonClassName} icon={props.dropdownIcon} onClick={onDropdownButtonClick} disabled={props.disabled}
+                    aria-expanded={overlayVisibleState} aria-haspopup aria-owns={panelId} />
+                <SplitButtonPanel ref={overlayRef} appendTo={props.appendTo} id={panelId} menuStyle={props.menuStyle} menuClassName={props.menuClassName} onClick={onPanelClick}
+                    in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} transitionOptions={props.transitionOptions}>
+                    {items}
+                </SplitButtonPanel>
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 5a7d70f066..bb7c4ecfdc 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -1,12 +1,10 @@
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import React, { forwardRef, memo, useRef } from 'react';
 import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, IconUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const ToggleButton = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
     const hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
     const hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
     const label = hasLabel ? (props.checked ? props.onLabel : props.offLabel) : '&nbsp;';
@@ -35,26 +33,6 @@ export const ToggleButton = memo(forwardRef((props, ref) => {
         }
     }
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createIcon = () => {
         if (hasIcon) {
             const iconClassName = classNames('p-button-icon p-c', {
@@ -68,6 +46,7 @@ export const ToggleButton = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const tabIndex = !props.disabled && props.tabIndex;
     const className = classNames('p-button p-togglebutton p-component', {
         'p-button-icon-only': hasIcon && !hasLabel,
@@ -77,13 +56,16 @@ export const ToggleButton = memo(forwardRef((props, ref) => {
     const iconElement = createIcon();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}
-            onClick={toggle} onFocus={props.onFocus} onBlur={props.onBlur} onKeyDown={onKeyDown}
-            tabIndex={tabIndex} aria-labelledby={props.ariaLabelledBy}>
-            {iconElement}
-            <span className="p-button-label">{label}</span>
-            <Ripple />
-        </div>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}
+                onClick={toggle} onFocus={props.onFocus} onBlur={props.onBlur} onKeyDown={onKeyDown}
+                tabIndex={tabIndex} aria-labelledby={props.ariaLabelledBy}>
+                {iconElement}
+                <span className="p-button-label">{label}</span>
+                <Ripple />
+            </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 73c7060f43..d4e6ce8d0e 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -1,40 +1,9 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 import PrimeReact from '../api/Api';
 import { Portal } from '../portal/Portal';
-import { DomHandler, classNames, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, classNames, ZIndexUtils, ObjectUtils } from '../utils/Utils';
 import { useMountEffect, useUpdateEffect, useUnmountEffect, useResizeListener, useOverlayScrollListener } from '../hooks/Hooks';
 
-export const tip = (props) => {
-    const appendTo = props.appendTo || document.body;
-
-    const tooltipWrapper = document.createDocumentFragment();
-    DomHandler.appendChild(tooltipWrapper, appendTo);
-
-    props = { ...props, ...props.options };
-
-    const tooltipEl = React.createElement(Tooltip, props);
-    ReactDOM.render(tooltipEl, tooltipWrapper);
-
-    const updateTooltip = (newProps) => {
-        props = { ...props, ...newProps };
-        ReactDOM.render(React.cloneElement(tooltipEl, props), tooltipWrapper);
-    };
-
-    return {
-        destroy: () => {
-            ReactDOM.unmountComponentAtNode(tooltipWrapper);
-        },
-        updateContent: (newContent) => {
-            console.warn("The 'updateContent' method has been deprecated on Tooltip. Use update(newProps) method.");
-            updateTooltip({ content: newContent });
-        },
-        update: (newProps) => {
-            updateTooltip(newProps);
-        }
-    }
-}
-
 export const Tooltip = forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = useState(false);
     const [positionState, setPositionState] = useState(props.position);
@@ -178,7 +147,7 @@ export const Tooltip = forwardRef((props, ref) => {
                 applyDelay('showDelay', () => {
                     setVisibleState(true);
                     setPositionState(getPosition(currentTargetRef.current));
-                    updateTooltipState();
+                    setTimeout(() => updateTooltipState(), 0);
                     sendCallback(props.onShow, { originalEvent: e, target: currentTargetRef.current });
                     DomHandler.addClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
                 });
@@ -384,6 +353,8 @@ export const Tooltip = forwardRef((props, ref) => {
     }
 
     const setTargetEventOperations = (target, operation) => {
+        target = ObjectUtils.getRefElement(target);
+
         if (target) {
             if (DomHandler.isElement(target)) {
                 operation(target);
@@ -419,7 +390,11 @@ export const Tooltip = forwardRef((props, ref) => {
     });
 
     useUpdateEffect(() => {
-        visibleState && loadTargetEvents();
+        loadTargetEvents();
+
+        return () => {
+            unloadTargetEvents();
+        }
     }, [show, hide, props.target]);
 
     useUpdateEffect(() => {
@@ -427,9 +402,6 @@ export const Tooltip = forwardRef((props, ref) => {
             bindWindowResizeListener();
             bindOverlayScrollListener();
         }
-        else {
-            textRef.current && ReactDOM.unmountComponentAtNode(textRef.current);
-        }
 
         return () => {
             unbindWindowResizeListener();
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 55b9f353f9..ad541a5eb4 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -1,12 +1,10 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const TriStateCheckbox = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
-    const tooltipRef = useRef(null);
     const inputRef = useRef(props.inputRef);
 
     const onClick = (event) => {
@@ -52,26 +50,7 @@ export const TriStateCheckbox = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);
     const boxClassName = classNames('p-checkbox-box', {
         'p-highlight': (props.value || !props.value) && props.value !== null,
@@ -84,15 +63,18 @@ export const TriStateCheckbox = memo(forwardRef((props, ref) => {
     });
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
-                    onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} defaultChecked={props.value} />
-            </div>
-            <div className={boxClassName} role="checkbox" aria-checked={props.value === true}>
-                <span className={iconClassName}></span>
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
+                        onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} defaultChecked={props.value} />
+                </div>
+                <div className={boxClassName} role="checkbox" aria-checked={props.value === true}>
+                    <span className={iconClassName}></span>
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index ca8a316594..5a259e23a7 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -322,150 +322,152 @@ export default class DomHandler {
     }
 
     static flipfitCollision(element, target, my = 'left top', at = 'left bottom', callback) {
-        const targetOffset = target.getBoundingClientRect();
-        const viewport = this.getViewport();
-        const myArr = my.split(' ');
-        const atArr = at.split(' ');
-        const getPositionValue = (arr, isOffset) => (isOffset ? (+arr.substring(arr.search(/(\+|-)/g)) || 0) : (arr.substring(0, arr.search(/(\+|-)/g)) || arr));
-        const position = {
-            my: {
-                x: getPositionValue(myArr[0]),
-                y: getPositionValue(myArr[1] || myArr[0]),
-                offsetX: getPositionValue(myArr[0], true),
-                offsetY: getPositionValue((myArr[1] || myArr[0]), true)
-            },
-            at: {
-                x: getPositionValue(atArr[0]),
-                y: getPositionValue(atArr[1] || atArr[0]),
-                offsetX: getPositionValue(atArr[0], true),
-                offsetY: getPositionValue((atArr[1] || atArr[0]), true)
-            }
-        };
-        const myOffset = {
-            left: () => {
-                const totalOffset = position.my.offsetX + position.at.offsetX;
-                return totalOffset + targetOffset.left + (position.my.x === 'left' ? 0 : -1 * (position.my.x === 'center' ? this.getOuterWidth(element) / 2 : this.getOuterWidth(element)));
-            },
-            top: () => {
-                const totalOffset = position.my.offsetY + position.at.offsetY;
-                return totalOffset + targetOffset.top + (position.my.y === 'top' ? 0 : -1 * (position.my.y === 'center' ? this.getOuterHeight(element) / 2 : this.getOuterHeight(element)));
-            }
-        };
-        const alignWithAt = {
-            count: {
-                x: 0,
-                y: 0
-            },
-            left: function() {
-                const left = myOffset.left();
-                const scrollLeft = DomHandler.getWindowScrollLeft();
-                element.style.left = (left + scrollLeft) + 'px';
-
-                if (this.count.x === 2) {
-                    element.style.left = scrollLeft + 'px';
-                    this.count.x = 0;
-                }
-                else if (left < 0) {
-                    this.count.x++;
-                    position.my.x = 'left';
-                    position.at.x = 'right';
-                    position.my.offsetX *= -1;
-                    position.at.offsetX *= -1;
-
-                    this.right();
-                }
-            },
-            right: function() {
-                const left = myOffset.left() + DomHandler.getOuterWidth(target);
-                const scrollLeft = DomHandler.getWindowScrollLeft();
-                element.style.left = (left + scrollLeft) + 'px';
-
-                if (this.count.x === 2) {
-                    element.style.left = (viewport.width - DomHandler.getOuterWidth(element) + scrollLeft) + 'px';
-                    this.count.x = 0;
-                }
-                else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
-                    this.count.x++;
-
-                    position.my.x = 'right';
-                    position.at.x = 'left';
-                    position.my.offsetX *= -1;
-                    position.at.offsetX *= -1;
-
-                    this.left();
+        if (element && target) {
+            const targetOffset = target.getBoundingClientRect();
+            const viewport = this.getViewport();
+            const myArr = my.split(' ');
+            const atArr = at.split(' ');
+            const getPositionValue = (arr, isOffset) => (isOffset ? (+arr.substring(arr.search(/(\+|-)/g)) || 0) : (arr.substring(0, arr.search(/(\+|-)/g)) || arr));
+            const position = {
+                my: {
+                    x: getPositionValue(myArr[0]),
+                    y: getPositionValue(myArr[1] || myArr[0]),
+                    offsetX: getPositionValue(myArr[0], true),
+                    offsetY: getPositionValue((myArr[1] || myArr[0]), true)
+                },
+                at: {
+                    x: getPositionValue(atArr[0]),
+                    y: getPositionValue(atArr[1] || atArr[0]),
+                    offsetX: getPositionValue(atArr[0], true),
+                    offsetY: getPositionValue((atArr[1] || atArr[0]), true)
                 }
-            },
-            top: function() {
-                const top = myOffset.top();
-                const scrollTop = DomHandler.getWindowScrollTop();
-                element.style.top = (top + scrollTop) + 'px';
-
-                if (this.count.y === 2) {
-                    element.style.left = scrollTop + 'px';
-                    this.count.y = 0;
+            };
+            const myOffset = {
+                left: () => {
+                    const totalOffset = position.my.offsetX + position.at.offsetX;
+                    return totalOffset + targetOffset.left + (position.my.x === 'left' ? 0 : -1 * (position.my.x === 'center' ? this.getOuterWidth(element) / 2 : this.getOuterWidth(element)));
+                },
+                top: () => {
+                    const totalOffset = position.my.offsetY + position.at.offsetY;
+                    return totalOffset + targetOffset.top + (position.my.y === 'top' ? 0 : -1 * (position.my.y === 'center' ? this.getOuterHeight(element) / 2 : this.getOuterHeight(element)));
                 }
-                else if (top < 0) {
-                    this.count.y++;
+            };
+            const alignWithAt = {
+                count: {
+                    x: 0,
+                    y: 0
+                },
+                left: function() {
+                    const left = myOffset.left();
+                    const scrollLeft = DomHandler.getWindowScrollLeft();
+                    element.style.left = (left + scrollLeft) + 'px';
+
+                    if (this.count.x === 2) {
+                        element.style.left = scrollLeft + 'px';
+                        this.count.x = 0;
+                    }
+                    else if (left < 0) {
+                        this.count.x++;
+                        position.my.x = 'left';
+                        position.at.x = 'right';
+                        position.my.offsetX *= -1;
+                        position.at.offsetX *= -1;
 
-                    position.my.y = 'top';
-                    position.at.y = 'bottom';
-                    position.my.offsetY *= -1;
-                    position.at.offsetY *= -1;
+                        this.right();
+                    }
+                },
+                right: function() {
+                    const left = myOffset.left() + DomHandler.getOuterWidth(target);
+                    const scrollLeft = DomHandler.getWindowScrollLeft();
+                    element.style.left = (left + scrollLeft) + 'px';
+
+                    if (this.count.x === 2) {
+                        element.style.left = (viewport.width - DomHandler.getOuterWidth(element) + scrollLeft) + 'px';
+                        this.count.x = 0;
+                    }
+                    else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
+                        this.count.x++;
 
-                    this.bottom();
-                }
-            },
-            bottom: function() {
-                const top = myOffset.top() + DomHandler.getOuterHeight(target);
-                const scrollTop = DomHandler.getWindowScrollTop();
-                element.style.top = (top + scrollTop) + 'px';
-
-                if (this.count.y === 2) {
-                    element.style.left = (viewport.height - DomHandler.getOuterHeight(element) + scrollTop) + 'px';
-                    this.count.y = 0;
-                }
-                else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
-                    this.count.y++;
+                        position.my.x = 'right';
+                        position.at.x = 'left';
+                        position.my.offsetX *= -1;
+                        position.at.offsetX *= -1;
 
-                    position.my.y = 'bottom';
-                    position.at.y = 'top';
-                    position.my.offsetY *= -1;
-                    position.at.offsetY *= -1;
+                        this.left();
+                    }
+                },
+                top: function() {
+                    const top = myOffset.top();
+                    const scrollTop = DomHandler.getWindowScrollTop();
+                    element.style.top = (top + scrollTop) + 'px';
+
+                    if (this.count.y === 2) {
+                        element.style.left = scrollTop + 'px';
+                        this.count.y = 0;
+                    }
+                    else if (top < 0) {
+                        this.count.y++;
 
-                    this.top();
-                }
-            },
-            center: function(axis) {
-                if (axis === 'y') {
-                    const top = myOffset.top() + (DomHandler.getOuterHeight(target) / 2);
-                    element.style.top = (top + DomHandler.getWindowScrollTop()) + 'px';
+                        position.my.y = 'top';
+                        position.at.y = 'bottom';
+                        position.my.offsetY *= -1;
+                        position.at.offsetY *= -1;
 
-                    if (top < 0) {
                         this.bottom();
                     }
+                },
+                bottom: function() {
+                    const top = myOffset.top() + DomHandler.getOuterHeight(target);
+                    const scrollTop = DomHandler.getWindowScrollTop();
+                    element.style.top = (top + scrollTop) + 'px';
+
+                    if (this.count.y === 2) {
+                        element.style.left = (viewport.height - DomHandler.getOuterHeight(element) + scrollTop) + 'px';
+                        this.count.y = 0;
+                    }
                     else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
+                        this.count.y++;
+
+                        position.my.y = 'bottom';
+                        position.at.y = 'top';
+                        position.my.offsetY *= -1;
+                        position.at.offsetY *= -1;
+
                         this.top();
                     }
-                }
-                else {
-                    const left = myOffset.left() + (DomHandler.getOuterWidth(target) / 2);
-                    element.style.left = (left + DomHandler.getWindowScrollLeft()) + 'px';
-
-                    if (left < 0) {
-                        this.left();
+                },
+                center: function(axis) {
+                    if (axis === 'y') {
+                        const top = myOffset.top() + (DomHandler.getOuterHeight(target) / 2);
+                        element.style.top = (top + DomHandler.getWindowScrollTop()) + 'px';
+
+                        if (top < 0) {
+                            this.bottom();
+                        }
+                        else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
+                            this.top();
+                        }
                     }
-                    else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
-                        this.right();
+                    else {
+                        const left = myOffset.left() + (DomHandler.getOuterWidth(target) / 2);
+                        element.style.left = (left + DomHandler.getWindowScrollLeft()) + 'px';
+
+                        if (left < 0) {
+                            this.left();
+                        }
+                        else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
+                            this.right();
+                        }
                     }
                 }
-            }
-        };
+            };
 
-        alignWithAt[position.at.x]('x');
-        alignWithAt[position.at.y]('y');
+            alignWithAt[position.at.x]('x');
+            alignWithAt[position.at.y]('y');
 
-        if (this.isFunction(callback)) {
-            callback(position);
+            if (this.isFunction(callback)) {
+                callback(position);
+            }
         }
     }