FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Tweak auto placement for new tooltips · patternfly-java/patternfly-java@5a40e09 · GitHub

/ patternfly-java Public

Commit 5a40e09

Browse files
hpehl
committed
Tweak auto placement for new tooltips
1 parent ccfd56f commit 5a40e09

3 files changed

Lines changed: 13 additions & 19 deletions

File tree

‎components/src/main/java/org/patternfly/component/tooltip/Tooltip2.java‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ public static Tooltip2 tooltip2(Supplier<HTMLElement> trigger, String text) {
153153
this.distance = DISTANCE;
154154
this.entryDelay = ENTRY_DELAY;
155155
this.exitDelay = EXIT_DELAY;
156-
this.placement = top;
156+
this.placement = auto;
157157
this.aria = describedBy;
158158
this.showTimeout = 0;
159159
this.hideTimeout = 0;
@@ -188,7 +188,9 @@ public void attach(MutationRecord mutationRecord) {
188188
trigger.style.setProperty("anchor-name", anchorName);
189189
style("position-anchor", anchorName);
190190
style("margin", distance + "px");
191-
applyPlacement();
191+
192+
// top is the default for auto and recalculated on show()
193+
applyPlacement(placement == auto ? top : placement);
192194

193195
// event listeners on trigger
194196
triggerHandlers = compose(
@@ -306,10 +308,10 @@ public void show() {
306308
}
307309

308310
public void show(Event event) {
309-
if (!visible) {
310-
if (placement == auto && trigger != null) {
311+
if (!visible && trigger != null) {
312+
if (placement == auto) {
311313
// Show invisibly to get measurable dimensions, calculate placement, then reveal
312-
element().style.setProperty("visibility", "hidden");
314+
style("visibility", "hidden");
313315
element().showPopover();
314316
applyPlacement(bestPlacement());
315317
element().style.removeProperty("visibility");
@@ -359,14 +361,6 @@ private void cancelTimers(Event event) {
359361
clearTimeout(hideTimeout);
360362
}
361363

362-
private void applyPlacement() {
363-
if (placement == auto) {
364-
applyPlacement(top); // default for auto, recalculated on show()
365-
} else {
366-
applyPlacement(placement);
367-
}
368-
}
369-
370364
private void applyPlacement(Placement p) {
371365
for (String mod : Placement.modifiers) {
372366
classList().remove(mod);

‎core/npm/core.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
!* Was top, flipped to bottom *!
6363
@container anchored(fallback: flip-block flip-inline) {
6464
.pf-v6-c-tooltip[popover].pf-m-top .pf-v6-c-tooltip__arrow {
65-
--pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
6665
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
66+
--pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
6767
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
6868
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
6969
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
@@ -86,9 +86,9 @@
8686
!* Was left, flipped to right *!
8787
@container anchored(fallback: flip-block flip-inline) {
8888
.pf-v6-c-tooltip[popover].pf-m-left .pf-v6-c-tooltip__arrow {
89-
--pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
9089
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
9190
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
91+
--pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
9292
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
9393
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
9494
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
@@ -98,8 +98,8 @@
9898
!* Was right, flipped to left *!
9999
@container anchored(fallback: flip-block flip-inline) {
100100
.pf-v6-c-tooltip[popover].pf-m-right .pf-v6-c-tooltip__arrow {
101-
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
102101
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
102+
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
103103
--pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
104104
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
105105
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);

‎showcase/src/web/main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const STYLES_TO_INSERT = `
4444
/* Was top, flipped to bottom */
4545
@container anchored(fallback: flip-block flip-inline) {
4646
.pf-v6-c-tooltip[popover].pf-m-top .pf-v6-c-tooltip__arrow {
47-
--pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
4847
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
48+
--pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
4949
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
5050
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
5151
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
@@ -68,9 +68,9 @@ const STYLES_TO_INSERT = `
6868
/* Was left, flipped to right */
6969
@container anchored(fallback: flip-block flip-inline) {
7070
.pf-v6-c-tooltip[popover].pf-m-left .pf-v6-c-tooltip__arrow {
71-
--pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
7271
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
7372
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
73+
--pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
7474
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
7575
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
7676
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
@@ -80,8 +80,8 @@ const STYLES_TO_INSERT = `
8080
/* Was right, flipped to left */
8181
@container anchored(fallback: flip-block flip-inline) {
8282
.pf-v6-c-tooltip[popover].pf-m-right .pf-v6-c-tooltip__arrow {
83-
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
8483
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
84+
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
8585
--pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
8686
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
8787
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL