Skip to content

Commit ea98824

Browse files
hiteshshetty-devhiteshshetty-dev
authored
Merge pull request #289 from contentstack/VE-3823-Tooltip-Position
Ve 3823 Tooltip Position Invert when space isn't available
2 parents acf2fb4 + b9ab40c commit ea98824

3 files changed

Lines changed: 95 additions & 60 deletions

File tree

‎src/visualBuilder/components/CommentIcon.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { visualBuilderStyles } from "../visualBuilder.style";
1212
interface CommentIconProps {
1313
fieldMetadata: CslpData;
1414
fieldSchema: ISchemaFieldMap;
15+
invertTooltipPosition: boolean;
1516
}
1617

1718
interface RecieveDiscussionEventData {
@@ -38,8 +39,9 @@ export interface IActiveDiscussion {
3839

3940

4041
export default function CommentIcon(props: CommentIconProps) {
41-
const { fieldMetadata, fieldSchema } = props;
42-
const [activeDiscussion, setActiveDiscussion] = useState<IActiveDiscussion | null>(null);
42+
const { fieldMetadata, fieldSchema, invertTooltipPosition = false } = props;
43+
const [activeDiscussion, setActiveDiscussion] =
44+
useState<IActiveDiscussion | null>(null);
4345
const [isLoading, setIsLoading] = useState<boolean>(false);
4446

4547
// Fetch discussion data based on field metadata
@@ -131,7 +133,12 @@ export default function CommentIcon(props: CommentIconProps) {
131133
"visual-builder__button visual-builder__button--secondary",
132134
visualBuilderStyles()["visual-builder__button"],
133135
visualBuilderStyles()["visual-builder__button--secondary"],
134-
visualBuilderStyles()["visual-builder__tooltip"]
136+
visualBuilderStyles()["visual-builder__tooltip"],
137+
{
138+
"visual-builder__tooltip--bottom": invertTooltipPosition,
139+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
140+
invertTooltipPosition,
141+
}
135142
)}
136143
data-tooltip={"Add comment"}
137144
onClick={(e) => {

‎src/visualBuilder/components/FieldToolbar.tsx‎

Lines changed: 72 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ import {
4141
} from "./FieldRevert/FieldRevertComponent";
4242

4343
export type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fieldMetadata">;
44+
45+
const TOOLTIP_TOP_EDGE_BUFFER = 96;
46+
4447
interface MultipleFieldToolbarProps {
4548
eventDetails: VisualBuilderCslpEventDetails;
4649
};
@@ -103,7 +106,7 @@ function FieldToolbarComponent(
103106
props: MultipleFieldToolbarProps
104107
): JSX.Element | null {
105108
const { eventDetails } = props;
106-
const { fieldMetadata, editableElement: targetElement} = eventDetails;
109+
const { fieldMetadata, editableElement: targetElement } = eventDetails;
107110
const direction = useSignal("");
108111
const parentPath =
109112
fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||
@@ -164,9 +167,12 @@ function FieldToolbarComponent(
164167
return null;
165168
}
166169
}
167-
170+
168171
direction.value = getChildrenDirection(targetElement, parentPath);
169172

173+
const invertTooltipPosition =
174+
targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
175+
170176
const editButton = Icon ? (
171177
<button
172178
data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__edit-button"
@@ -175,7 +181,12 @@ function FieldToolbarComponent(
175181
visualBuilderStyles()["visual-builder__button"],
176182
visualBuilderStyles()["visual-builder__button--secondary"],
177183
visualBuilderStyles()["visual-builder__button--edit"],
178-
visualBuilderStyles()["visual-builder__tooltip"]
184+
visualBuilderStyles()["visual-builder__tooltip"],
185+
{
186+
"visual-builder__tooltip--bottom": invertTooltipPosition,
187+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
188+
invertTooltipPosition,
189+
}
179190
)}
180191
data-tooltip={"Edit"}
181192
onClick={(e) => {
@@ -196,7 +207,12 @@ function FieldToolbarComponent(
196207
"visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
197208
visualBuilderStyles()["visual-builder__button"],
198209
visualBuilderStyles()["visual-builder__button--secondary"],
199-
visualBuilderStyles()["visual-builder__tooltip"]
210+
visualBuilderStyles()["visual-builder__tooltip"],
211+
{
212+
"visual-builder__tooltip--bottom": invertTooltipPosition,
213+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
214+
invertTooltipPosition,
215+
}
200216
)}
201217
data-tooltip={"Replace"}
202218
data-testid={`visual-builder-replace-${fieldType}`}
@@ -216,19 +232,28 @@ function FieldToolbarComponent(
216232
</button>
217233
) : null;
218234

219-
const formButton = <button
220-
className={classNames(
221-
"visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
222-
visualBuilderStyles()["visual-builder__button"],
223-
visualBuilderStyles()["visual-builder__button--secondary"],
224-
visualBuilderStyles()["visual-builder__tooltip"]
225-
)}
226-
data-tooltip={"Form"}
227-
data-testid={`visual-builder-form`}
228-
onClick={(e) => {handleFormFieldFocus(eventDetails)}}
229-
>
230-
<FormIcon />
231-
</button>
235+
const formButton = (
236+
<button
237+
className={classNames(
238+
"visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
239+
visualBuilderStyles()["visual-builder__button"],
240+
visualBuilderStyles()["visual-builder__button--secondary"],
241+
visualBuilderStyles()["visual-builder__tooltip"],
242+
{
243+
"visual-builder__tooltip--bottom": invertTooltipPosition,
244+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
245+
invertTooltipPosition,
246+
}
247+
)}
248+
data-tooltip={"Form"}
249+
data-testid={`visual-builder-form`}
250+
onClick={(e) => {
251+
handleFormFieldFocus(eventDetails);
252+
}}
253+
>
254+
<FormIcon />
255+
</button>
256+
);
232257

233258
const toggleVariantDropdown = () => {
234259
setIsOpenVariantRevert(!isOpenVariantRevert);
@@ -245,7 +270,12 @@ function FieldToolbarComponent(
245270
visualBuilderStyles()["visual-builder__button"],
246271
visualBuilderStyles()["visual-builder__button--secondary"],
247272
visualBuilderStyles()["visual-builder__tooltip"],
248-
visualBuilderStyles()["visual-builder__variant-button"]
273+
visualBuilderStyles()["visual-builder__variant-button"],
274+
{
275+
"visual-builder__tooltip--bottom": invertTooltipPosition,
276+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
277+
invertTooltipPosition,
278+
}
249279
)}
250280
data-tooltip={"Variant Revert"}
251281
data-testid={`visual-builder-canvas-variant-revert`}
@@ -279,6 +309,18 @@ function FieldToolbarComponent(
279309
fetchFieldSchema();
280310
}, [fieldMetadata]);
281311

312+
const multipleFieldToolbarButtonClasses = classNames(
313+
"visual-builder__button visual-builder__button--secondary",
314+
visualBuilderStyles()["visual-builder__button"],
315+
visualBuilderStyles()["visual-builder__button--secondary"],
316+
visualBuilderStyles()["visual-builder__tooltip"],
317+
{
318+
"visual-builder__tooltip--bottom": invertTooltipPosition,
319+
[visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
320+
invertTooltipPosition,
321+
}
322+
);
323+
282324
return (
283325
<div
284326
className={classNames(
@@ -318,18 +360,9 @@ function FieldToolbarComponent(
318360
<>
319361
<button
320362
data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button"
321-
className={classNames(
322-
`visual-builder__button visual-builder__button--secondary`,
323-
visualBuilderStyles()[
324-
"visual-builder__button"
325-
],
326-
visualBuilderStyles()[
327-
"visual-builder__button--secondary"
328-
],
329-
visualBuilderStyles()[
330-
"visual-builder__tooltip"
331-
]
332-
)}
363+
className={
364+
multipleFieldToolbarButtonClasses
365+
}
333366
data-tooltip={
334367
direction.value === "vertical"
335368
? "Move up"
@@ -359,18 +392,9 @@ function FieldToolbarComponent(
359392

360393
<button
361394
data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button"
362-
className={classNames(
363-
`visual-builder__button visual-builder__button--secondary`,
364-
visualBuilderStyles()[
365-
"visual-builder__button"
366-
],
367-
visualBuilderStyles()[
368-
"visual-builder__button--secondary"
369-
],
370-
visualBuilderStyles()[
371-
"visual-builder__tooltip"
372-
]
373-
)}
395+
className={
396+
multipleFieldToolbarButtonClasses
397+
}
374398
data-tooltip={
375399
direction.value === "vertical"
376400
? "Move down"
@@ -404,18 +428,9 @@ function FieldToolbarComponent(
404428

405429
<button
406430
data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__delete-button"
407-
className={classNames(
408-
"visual-builder__button visual-builder__button--secondary",
409-
visualBuilderStyles()[
410-
"visual-builder__button"
411-
],
412-
visualBuilderStyles()[
413-
"visual-builder__button--secondary"
414-
],
415-
visualBuilderStyles()[
416-
"visual-builder__tooltip"
417-
]
418-
)}
431+
className={
432+
multipleFieldToolbarButtonClasses
433+
}
419434
data-tooltip={"Delete"}
420435
onClick={(e) => {
421436
e.preventDefault();
@@ -435,6 +450,9 @@ function FieldToolbarComponent(
435450
<CommentIcon
436451
fieldMetadata={fieldMetadata}
437452
fieldSchema={fieldSchema}
453+
invertTooltipPosition={
454+
invertTooltipPosition
455+
}
438456
/>
439457
) : null}
440458
</>

‎src/visualBuilder/visualBuilder.style.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const tooltipBaseStyle = `
2626
&:after {
2727
content: "";
2828
position: absolute;
29-
bottom: 25px;
29+
bottom: 28px;
3030
/* the arrow */
3131
border: 10px solid #000;
3232
border-color: #767676 transparent transparent transparent;
@@ -111,7 +111,7 @@ export function visualBuilderStyles() {
111111
color: #6c5ce7;
112112
overflow: hidden;
113113
114-
z-index: 200;
114+
z-index: 2147483647 !important;
115115
116116
display: grid;
117117
grid-template-columns: min-content 0fr;
@@ -430,12 +430,22 @@ export function visualBuilderStyles() {
430430
&:hover:before,
431431
&:hover:after {
432432
display: block;
433+
z-index: 2147483647 !important;
433434
}
434435
435436
&:after {
436437
display: none;
437438
}
438439
`,
440+
"visual-builder__tooltip--bottom": css`
441+
&:before {
442+
bottom: -66px;
443+
}
444+
&:after {
445+
bottom: -6px;
446+
transform: rotate(180deg);
447+
}
448+
`,
439449

440450
"visual-builder__tooltip--persistent": css`
441451
${tooltipBaseStyle}
@@ -504,7 +514,7 @@ export function visualBuilderStyles() {
504514
outline: 2px solid #bd59fa;
505515
`,
506516
"visual-builder__pseudo-editable-element": css`
507-
z-index: 2147483647 !important;
517+
z-index: 99999 !important;
508518
`,
509519
// cslp error styles
510520
"visual-builder__button-error": css`

0 commit comments

Comments
 (0)