mirror of
https://github.com/hrfee/jfa-go.git
synced 2026-03-18 21:50:33 +01:00
455bde491f
uses the <tool-tip> tag now, and the setupTooltips() function in ui.ts must be called at any point in the pages load. added "below-center" position, showing below and centered horizontally. breakpoint tailwind lingo also now works (e.g. "below-center sm:right"). If a left or right-aligned tooltip clips off the screen, it will be shifted the appropriate amount left/right to avoid that automatically.
96 lines
1.9 KiB
CSS
96 lines
1.9 KiB
CSS
@layer components {
|
|
tool-tip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
tool-tip .content {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: max-content;
|
|
max-width: 16rem;
|
|
/*min-width: 6rem;*/
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
overflow-wrap: break-word;
|
|
text-align: center;
|
|
transition: opacity 100ms;
|
|
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -1rem;
|
|
}
|
|
|
|
tool-tip.above {
|
|
--tooltip-position: above;
|
|
}
|
|
tool-tip.below {
|
|
--tooltip-position: below;
|
|
}
|
|
tool-tip.below-center {
|
|
--tooltip-position: below-center;
|
|
}
|
|
tool-tip.left {
|
|
--tooltip-position: left;
|
|
}
|
|
tool-tip.right {
|
|
--tooltip-position: right;
|
|
}
|
|
|
|
tool-tip.below .content {
|
|
top: calc(100% + 0.125rem);
|
|
left: 50%;
|
|
right: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
tool-tip.below-center .content {
|
|
top: calc(100% + 0.125rem);
|
|
max-width: calc(100vw - 4rem);
|
|
}
|
|
|
|
tool-tip.above .content {
|
|
top: unset;
|
|
bottom: calc(100% + 0.125rem);
|
|
left: 50%;
|
|
right: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
tool-tip.darker .content {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
tool-tip.right .content {
|
|
left: 0%;
|
|
}
|
|
|
|
tool-tip.right:dir(rtl):not(.force-ltr) .content {
|
|
right: 0%;
|
|
left: unset;
|
|
}
|
|
|
|
tool-tip.left .content {
|
|
right: 0%;
|
|
}
|
|
|
|
tool-tip.left:dir(rtl):not(.force-ltr) .content {
|
|
left: 0%;
|
|
right: unset;
|
|
}
|
|
|
|
tool-tip .content.sm {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/*tool-tip:hover .content,
|
|
tool-tip:focus .content,
|
|
tool-tip:focus-within .content*/
|
|
tool-tip.shown .content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|