mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 03:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #211 from wenkm/tooltip

Browse source 
Tooltip support directions
This commit is contained in:
Lucas Larroche 2022-09-11 15:24:37 +07:00 • committed by GitHub
commit 8f579efc4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 891 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

229
css/pico.classless.css
View file

@ -2270,7 +2270,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2292,7 +2292,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2303,23 +2303,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2329,8 +2392,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2340,7 +2402,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2353,7 +2415,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2366,6 +2428,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

229
css/pico.css
View file

@ -2468,7 +2468,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2490,7 +2490,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2501,23 +2501,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2527,8 +2590,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2538,7 +2600,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2551,7 +2613,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2564,6 +2626,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

229
css/pico.fluid.classless.css
View file

@ -2240,7 +2240,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2262,7 +2262,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2273,23 +2273,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2299,8 +2362,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2310,7 +2372,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2323,7 +2385,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2336,6 +2398,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/scss/pico.docs.scss
View file

@ -21,4 +21,4 @@
// Components // Components
@import "components/modal"; @import "components/modal";
@import "components/nav"; @import "components/nav";
@import "components/theme-switcher"; @import "components/theme-switcher";

24
docs/src/tooltips.html
View file

@ -28,10 +28,32 @@
<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt; <pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt; &lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre> &lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
</code></pre>
</footer> </footer>
</article> </article>
<p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>
<article aria-label="Tooltips examples">
<div class="grid">
<div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
<div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
<div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
<div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
</div>
<footer class="code">
<pre><code>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left&lt;/<b>button</b>&gt;
</code></pre>
</footer>
</article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}

7
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

237
scss/utilities/_tooltip.scss
View file

@ -11,6 +11,8 @@
cursor: help; cursor: help;
} }
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before, &::before,
&::after { &::after {
display: block; display: block;
@ -34,8 +36,9 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[data-placement="top"]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -48,6 +51,55 @@
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, .25rem);
}
&:after{
transform: translate(-50%, -.3rem);
border: .3rem solid transparent;
border-bottom: .3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-.25rem, -50%);
}
&:after{
transform: translate(.3rem, -50%);
border: .3rem solid transparent;
border-left: .3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(.25rem, -50%);
}
&:after{
transform: translate(-.3rem, -50%);
border: .3rem solid transparent;
border-right: .3rem solid;
}
}
// Display // Display
&:focus, &:focus,
&:hover { &:hover {
@ -57,49 +109,170 @@
} }
} }
// Animations, excluding touch devices
@if $enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus,
&[data-placement="bottom"]:hover
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide; animation-name: tooltip-slide-top;
} }
&::after { &::after {
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
} }
} }
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-bottom;
}
&::after {
animation-name: tooltip-caret-slide-bottom;
}
}
}
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-left;
}
&::after {
animation-name: tooltip-caret-slide-left;
}
}
}
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-right;
}
&::after {
animation-name: tooltip-caret-slide-right;
}
}
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, .75rem);
opacity: 0;
}
to {
transform: translate(-50%, -.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
}
} }
} }
} }
// Animations
@if $enable-transitions {
@keyframes slide {
from {
transform: translate(-50%, .75rem);
opacity: 0;
}
to {
transform: translate(-50%, -.25rem);
opacity: 1;
}
}
@keyframes slideCaret {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
}