Skip to content

Commit

Permalink
✨ feat(tooltips.scss): Add tooltip--visible class to show tooltips ou…
Browse files Browse the repository at this point in the history 
…tside of :hover and :focus
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Jun 29, 2024
1 parent 8e802f9 commit 9b77f78
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 45 deletions.
16 changes: 8 additions & 8 deletions next/dist/cirrus-all.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28038,7 +28038,7 @@ a.tag:hover {
border-radius: 0.2rem;
}

.tooltip:focus::after, .tooltip:hover::after {
.tooltip:focus::after, .tooltip:hover::after, .tooltip.tooltip--visible::after {
opacity: 1;
transform: translate(-50%, -0.5rem);
transition: all var(--animation-duration) ease;
Expand All @@ -28048,7 +28048,7 @@ a.tag:hover {
transform: translate(-50%, 0);
}

.tooltip.tooltip--top-left:hover::after, .tooltip.tooltip--top-left:focus::after {
.tooltip.tooltip--top-left:hover::after, .tooltip.tooltip--top-left:focus::after, .tooltip.tooltip--top-left.tooltip--visible::after {
left: 0;
transform: translate(-100%, -0.5rem);
}
Expand All @@ -28058,7 +28058,7 @@ a.tag:hover {
transform: translate(15%, 0);
}

.tooltip.tooltip--top-right:hover::after, .tooltip.tooltip--top-right:focus::after {
.tooltip.tooltip--top-right:hover::after, .tooltip.tooltip--top-right:focus::after, .tooltip.tooltip--top-right.tooltip--visible::after {
right: 0;
transform: translate(100%, -0.5rem);
}
Expand All @@ -28069,7 +28069,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom:hover::after, .tooltip.tooltip--bottom:focus::after {
.tooltip.tooltip--bottom:hover::after, .tooltip.tooltip--bottom:focus::after, .tooltip.tooltip--bottom.tooltip--visible::after {
transform: translate(-50%, 0.5rem);
bottom: auto;
}
Expand All @@ -28080,7 +28080,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom-left:hover::after, .tooltip.tooltip--bottom-left:focus::after {
.tooltip.tooltip--bottom-left:hover::after, .tooltip.tooltip--bottom-left:focus::after, .tooltip.tooltip--bottom-left.tooltip--visible::after {
left: 0;
transform: translate(-100%, 0.5rem);
}
Expand All @@ -28092,7 +28092,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom-right:hover::after, .tooltip.tooltip--bottom-right:focus::after {
.tooltip.tooltip--bottom-right:hover::after, .tooltip.tooltip--bottom-right:focus::after, .tooltip.tooltip--bottom-right.tooltip--visible::after {
right: 0;
transform: translate(100%, 0.5rem);
}
Expand All @@ -28103,7 +28103,7 @@ a.tag:hover {
transform: translate(-1rem, 50%);
}

.tooltip.tooltip--right:hover::after, .tooltip.tooltip--right:focus::after {
.tooltip.tooltip--right:hover::after, .tooltip.tooltip--right:focus::after, .tooltip.tooltip--right.tooltip--visible::after {
transform: translate(0.5rem, 50%);
}

Expand All @@ -28114,6 +28114,6 @@ a.tag:hover {
transform: translate(1rem, 50%);
}

.tooltip.tooltip--left:hover::after, .tooltip.tooltip--left:focus::after {
.tooltip.tooltip--left:hover::after, .tooltip.tooltip--left:focus::after, .tooltip.tooltip--left.tooltip--visible::after {
transform: translate(-0.5rem, 50%);
}
2 changes: 1 addition & 1 deletion next/dist/cirrus-all.min.css
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions next/dist/cirrus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24104,7 +24104,7 @@ a.tag:hover {
border-radius: 0.2rem;
}

.tooltip:focus::after, .tooltip:hover::after {
.tooltip:focus::after, .tooltip:hover::after, .tooltip.tooltip--visible::after {
opacity: 1;
transform: translate(-50%, -0.5rem);
transition: all var(--animation-duration) ease;
Expand All @@ -24114,7 +24114,7 @@ a.tag:hover {
transform: translate(-50%, 0);
}

.tooltip.tooltip--top-left:hover::after, .tooltip.tooltip--top-left:focus::after {
.tooltip.tooltip--top-left:hover::after, .tooltip.tooltip--top-left:focus::after, .tooltip.tooltip--top-left.tooltip--visible::after {
left: 0;
transform: translate(-100%, -0.5rem);
}
Expand All @@ -24124,7 +24124,7 @@ a.tag:hover {
transform: translate(15%, 0);
}

.tooltip.tooltip--top-right:hover::after, .tooltip.tooltip--top-right:focus::after {
.tooltip.tooltip--top-right:hover::after, .tooltip.tooltip--top-right:focus::after, .tooltip.tooltip--top-right.tooltip--visible::after {
right: 0;
transform: translate(100%, -0.5rem);
}
Expand All @@ -24135,7 +24135,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom:hover::after, .tooltip.tooltip--bottom:focus::after {
.tooltip.tooltip--bottom:hover::after, .tooltip.tooltip--bottom:focus::after, .tooltip.tooltip--bottom.tooltip--visible::after {
transform: translate(-50%, 0.5rem);
bottom: auto;
}
Expand All @@ -24146,7 +24146,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom-left:hover::after, .tooltip.tooltip--bottom-left:focus::after {
.tooltip.tooltip--bottom-left:hover::after, .tooltip.tooltip--bottom-left:focus::after, .tooltip.tooltip--bottom-left.tooltip--visible::after {
left: 0;
transform: translate(-100%, 0.5rem);
}
Expand All @@ -24158,7 +24158,7 @@ a.tag:hover {
bottom: auto;
}

.tooltip.tooltip--bottom-right:hover::after, .tooltip.tooltip--bottom-right:focus::after {
.tooltip.tooltip--bottom-right:hover::after, .tooltip.tooltip--bottom-right:focus::after, .tooltip.tooltip--bottom-right.tooltip--visible::after {
right: 0;
transform: translate(100%, 0.5rem);
}
Expand All @@ -24169,7 +24169,7 @@ a.tag:hover {
transform: translate(-1rem, 50%);
}

.tooltip.tooltip--right:hover::after, .tooltip.tooltip--right:focus::after {
.tooltip.tooltip--right:hover::after, .tooltip.tooltip--right:focus::after, .tooltip.tooltip--right.tooltip--visible::after {
transform: translate(0.5rem, 50%);
}

Expand All @@ -24180,6 +24180,6 @@ a.tag:hover {
transform: translate(1rem, 50%);
}

.tooltip.tooltip--left:hover::after, .tooltip.tooltip--left:focus::after {
.tooltip.tooltip--left:hover::after, .tooltip.tooltip--left:focus::after, .tooltip.tooltip--left.tooltip--visible::after {
transform: translate(-0.5rem, 50%);
}
2 changes: 1 addition & 1 deletion next/dist/cirrus.min.css
View file

Large diffs are not rendered by default.

76 changes: 49 additions & 27 deletions next/src/components/tooltips.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@

/* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */
&:focus::after,
&:hover::after {
&:hover::after,
&.tooltip--visible::after {
opacity: 1;
transform: translate(-50%, -0.5rem);
transition: all var(--animation-duration) ease;
Expand All @@ -46,10 +47,13 @@
transform: translate(-50%, 0);
}

&.tooltip--top-left:hover::after,
&.tooltip--top-left:focus::after {
left: 0;
transform: translate(-100%, -0.5rem);
&.tooltip--top-left {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
left: 0;
transform: translate(-100%, -0.5rem);
}
}

/* Tooltip top right */
Expand All @@ -58,10 +62,13 @@
transform: translate(15%, 0);
}

&.tooltip--top-right:hover::after,
&.tooltip--top-right:focus::after {
right: 0;
transform: translate(100%, -0.5rem);
&.tooltip--top-right {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
right: 0;
transform: translate(100%, -0.5rem);
}
}

/* Tooltip bottom */
Expand All @@ -71,10 +78,13 @@
bottom: auto;
}

&.tooltip--bottom:hover::after,
&.tooltip--bottom:focus::after {
transform: translate(-50%, 0.5rem);
bottom: auto;
&.tooltip--bottom {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
transform: translate(-50%, 0.5rem);
bottom: auto;
}
}

/* Tooltip bottom left */
Expand All @@ -84,10 +94,13 @@
bottom: auto;
}

&.tooltip--bottom-left:hover::after,
&.tooltip--bottom-left:focus::after {
left: 0;
transform: translate(-100%, 0.5rem);
&.tooltip--bottom-left {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
left: 0;
transform: translate(-100%, 0.5rem);
}
}

/* Tooltip bottom right */
Expand All @@ -98,10 +111,13 @@
bottom: auto;
}

&.tooltip--bottom-right:hover::after,
&.tooltip--bottom-right:focus::after {
right: 0;
transform: translate(100%, 0.5rem);
&.tooltip--bottom-right {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
right: 0;
transform: translate(100%, 0.5rem);
}
}

/* Tooltip right */
Expand All @@ -111,9 +127,12 @@
transform: translate(-1rem, 50%);
}

&.tooltip--right:hover::after,
&.tooltip--right:focus::after {
transform: translate(0.5rem, 50%);
&.tooltip--right {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
transform: translate(0.5rem, 50%);
}
}

/* Tooltip Left */
Expand All @@ -124,9 +143,12 @@
transform: translate(1rem, 50%);
}

&.tooltip--left:hover::after,
&.tooltip--left:focus::after {
transform: translate(-0.5rem, 50%);
&.tooltip--left {
&:hover::after,
&:focus::after,
&.tooltip--visible::after {
transform: translate(-0.5rem, 50%);
}
}
}
}

0 comments on commit 9b77f78

Please sign in to comment.