@ihabdevteam/core 0.50.0 → 0.51.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,11 @@ export default function Tooltip(props) {
|
|
|
14
14
|
const [measured, setMeasured] = useState(false);
|
|
15
15
|
const [isMobile, setIsMobile] = useState(false);
|
|
16
16
|
// anchorEl 제공 시 항상 live rect 사용, 아니면 anchorRect prop 사용
|
|
17
|
-
|
|
17
|
+
/* 붙일 자리가 없으면 **글 흐름 안에** 그린다 — 아래에서 포털도 위치 계산도 건너뛴다.
|
|
18
|
+
그런데 `.tooltip-content` 는 `position:absolute` 라, 여기서 인라인 표시를 붙여
|
|
19
|
+
주지 않으면 스타일시트가 그 결정을 도로 눌러 버린다. 그러면 anchor 없는 툴팁이
|
|
20
|
+
여럿일 때 **모두 한 점에 겹쳐** 하나만 보인다(놀이터 #tooltip 미리보기에서 넷이
|
|
21
|
+
735,671 한 자리에 포개져 있었다 — 2026-09-09 실측). */
|
|
18
22
|
const isInline = !anchorRect && !anchorEl;
|
|
19
23
|
// direct=true 이면 React state 대신 DOM 직접 업데이트 (scroll 딜레이 제거)
|
|
20
24
|
const computePosition = useCallback((direct = false) => {
|
|
@@ -286,7 +290,7 @@ export default function Tooltip(props) {
|
|
|
286
290
|
}
|
|
287
291
|
};
|
|
288
292
|
}, [startClose]);
|
|
289
|
-
const el = (_jsxs("div", { ref: ref, className: `tooltip-content ${useBorder ? 'tooltip-content--bordered' : ''} ${closing ? 'is-closing' : ''} ${className} ${isMobile && isMobilePopup ? 'is-mobile' : ''}`, role: role, "aria-label": ariaLabel || undefined, style: isInline ? {} : { ...posStyle, visibility: measured ? 'visible' : 'hidden' }, tabIndex: -1, "data-placement": placement, "data-left": !isInline ? posStyle.left : '', "data-top": !isInline ? posStyle.top : '', "data-anchor-left": anchorRect ? Math.round(anchorRect.left) : '', "data-anchor-top": anchorRect ? Math.round(anchorRect.top) : '', "data-anchor-width": anchorRect ? Math.round(anchorRect.width) : '', "data-anchor-height": anchorRect ? Math.round(anchorRect.height) : '', children: [header != null && _jsx("div", { className: "tooltip-content__header h5", children: header }), children] }));
|
|
293
|
+
const el = (_jsxs("div", { ref: ref, className: `tooltip-content ${isInline ? 'tooltip-content--inline' : ''} ${useBorder ? 'tooltip-content--bordered' : ''} ${closing ? 'is-closing' : ''} ${className} ${isMobile && isMobilePopup ? 'is-mobile' : ''}`, role: role, "aria-label": ariaLabel || undefined, style: isInline ? {} : { ...posStyle, visibility: measured ? 'visible' : 'hidden' }, tabIndex: -1, "data-placement": placement, "data-left": !isInline ? posStyle.left : '', "data-top": !isInline ? posStyle.top : '', "data-anchor-left": anchorRect ? Math.round(anchorRect.left) : '', "data-anchor-top": anchorRect ? Math.round(anchorRect.top) : '', "data-anchor-width": anchorRect ? Math.round(anchorRect.width) : '', "data-anchor-height": anchorRect ? Math.round(anchorRect.height) : '', children: [header != null && _jsx("div", { className: "tooltip-content__header h5", children: header }), children] }));
|
|
290
294
|
if (isInline)
|
|
291
295
|
return el;
|
|
292
296
|
if (typeof document === 'undefined')
|