Refactor #4602 - For Tooltip

primefaces · Aug 8, 2023 · dfbe7bc · dfbe7bc
1 parent cb99920
commit dfbe7bc
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 79 deletions.
diff --git a/components/lib/tooltip/Tooltip.css b/components/lib/tooltip/Tooltip.css
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
@@ -4,6 +4,7 @@ import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmount
 import { Portal } from '../portal/Portal';
 import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { TooltipBase } from './TooltipBase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Tooltip = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -12,14 +13,16 @@ export const Tooltip = React.memo(
         const [visibleState, setVisibleState] = React.useState(false);
         const [positionState, setPositionState] = React.useState(props.position);
         const [classNameState, setClassNameState] = React.useState('');
-        const { ptm } = TooltipBase.setMetaData({
+        const { ptm, cx, isUnstyled } = TooltipBase.setMetaData({
             props,
             state: {
                 visible: visibleState,
                 position: positionState,
                 className: classNameState
             }
         });
+
+        useHandleStyle(TooltipBase.css.styles, isUnstyled, { name: 'tooltip' });
         const elementRef = React.useRef(null);
         const textRef = React.useRef(null);
         const currentTargetRef = React.useRef(null);
@@ -470,20 +473,11 @@ export const Tooltip = React.memo(
         }));
 
         const createElement = () => {
-            const tooltipClassName = classNames(
-                'p-tooltip p-component',
-                {
-                    [`p-tooltip-${positionState}`]: true
-                },
-                props.className,
-                classNameState
-            );
             const empty = isTargetContentEmpty(currentTargetRef.current);
             const rootProps = mergeProps(
                 {
                     id: props.id,
-                    ref: elementRef,
-                    className: tooltipClassName,
+                    className: classNames(props.className, cx('root', { positionState, classNameState })),
                     style: props.style,
                     role: 'tooltip',
                     'aria-hidden': visibleState,
@@ -496,23 +490,22 @@ export const Tooltip = React.memo(
 
             const arrowProps = mergeProps(
                 {
-                    className: 'p-tooltip-arrow'
+                    className: cx('arrow')
                 },
                 ptm('arrow')
             );
 
             const textProps = mergeProps(
                 {
-                    ref: textRef,
-                    className: 'p-tooltip-text'
+                    className: cx('text')
                 },
                 ptm('text')
             );
 
             return (
-                <div {...rootProps}>
+                <div ref={elementRef} {...rootProps}>
                     <div {...arrowProps}></div>
-                    <div {...textProps}>{empty && props.children}</div>
+                    <div ref={textRef} {...textProps}>{empty && props.children}</div>
                 </div>
             );
         };

diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js
@@ -1,5 +1,82 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { ObjectUtils } from '../utils/Utils';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ positionState, classNameState}) => classNames(
+        'p-tooltip p-component',
+        {
+            [`p-tooltip-${positionState}`]: true
+        },
+        classNameState
+    ),
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+const styles = `
+.p-tooltip {
+    position: absolute;
+    padding: .25em .5rem;
+    /* #3687: Tooltip prevent scrollbar flickering */
+    top: -9999px;
+    left: -9999px;
+}
+
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+    padding: 0 .25rem;
+}
+
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+    padding:.25em 0;
+}
+
+.p-tooltip .p-tooltip-text {
+   white-space: pre-line;
+   word-break: break-word;
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -.25rem;
+    border-width: .25em .25em .25em 0;
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -.25rem;
+    border-width: .25em 0 .25em .25rem;
+}
+
+.p-tooltip.p-tooltip-top {
+    padding: .25em 0;
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: .25em .25em 0;
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: 0 .25em .25rem;
+}
+`;
 
 export const TooltipBase = ComponentBase.extend({
     defaultProps: {
@@ -32,5 +109,9 @@ export const TooltipBase = ComponentBase.extend({
         target: null,
         updateDelay: 0,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });