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

Mult-iline Tooltips

Browse source 
Max width set to
This commit is contained in:
JWB 2025-03-16 00:17:42 -04:00 • committed by GitHub
parent 1039a4788d
commit c51f6fcc26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
scss/components/_tooltip.scss
View file

@ -9,7 +9,7 @@
#{$parent-selector} [data-tooltip] {
position: relative;
&:not(a, button, input, [role="button"]) {
&:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
@ -19,11 +19,13 @@
&[data-placement="top"]::after,
&::before,
&::after {
display: block;
display: inline-block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
width: max-content;
max-width: 250px;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
@ -34,9 +36,10 @@
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
white-space: normal;
opacity: 0;
pointer-events: none;
}
@ -44,6 +47,7 @@
// Caret
&[data-placement="top"]::after,
&::after {
width: 0;
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
@ -205,6 +209,7 @@
50% {
opacity: 0;
}
to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1;