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

Merge pull request #1 from wenkeming/tooltips

Browse source 
support tooltip directions with placement property
This commit is contained in:
Kevin 2022-03-15 16:00:47 +08:00 • committed by GitHub
commit 82dbcb24a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 168 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

176
scss/utilities/_tooltip.scss
View file

@ -1,6 +1,6 @@
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
@ -11,6 +11,8 @@
cursor: help; cursor: help;
} }
&[placement=top]::before,
&[placement=top]::after,
&::before, &::before,
&::after { &::after {
display: block; display: block;
@ -34,8 +36,8 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[placement=top]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -47,6 +49,49 @@
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
&[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;
}
}
&[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;
}
}
&[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,
@ -60,16 +105,60 @@
// Animations, excluding touch devices // Animations, excluding touch devices
@if $enable-transitions { @if $enable-transitions {
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[placement=bottom]:focus,
&[placement=bottom]:hover
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide; animation-name: slide-top;
} }
&::after { &::after {
animation-name: slideCaret; animation-name: slideCaret-top;
}
}
&[placement=bottom] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-bottom;
}
&::after {
animation-name: slideCaret-bottom;
}
}
}
&[placement=left] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-left;
}
&::after {
animation-name: slideCaret-left;
}
}
}
&[placement=right] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-right;
}
&::after {
animation-name: slideCaret-right;
}
} }
} }
} }
@ -78,7 +167,7 @@
// Animations // Animations
@if $enable-transitions { @if $enable-transitions {
@keyframes slide { @keyframes slide-top {
from { from {
transform: translate(-50%, .75rem); transform: translate(-50%, .75rem);
opacity: 0; opacity: 0;
@ -88,8 +177,7 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret-top {
@keyframes slideCaret {
from { from {
opacity: 0; opacity: 0;
} }
@ -102,4 +190,76 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slide-bottom {
from {
transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
}
@keyframes slideCaret-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
}
@keyframes slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes slideCaret-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes slideCaret-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
}
}
} }