361 lines
12 KiB
HTML
361 lines
12 KiB
HTML
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Pattern</title>
|
||
|
|
</head>
|
||
|
|
<body data-prismjs-copy-timeout="1500">
|
||
|
|
<h2>What is it</h2>
|
||
|
|
<h2>When to use it</h2>
|
||
|
|
<h2>How to use it</h2>
|
||
|
|
<p>Either form works. Place this inside another element for the tooltip to be "linked to that element."</p>
|
||
|
|
<p>Tool tip positions are: </p>
|
||
|
|
<ul>
|
||
|
|
<li>top / block-start</li>
|
||
|
|
<li>right / inline-end</li>
|
||
|
|
<li>bottom / block-end</li>
|
||
|
|
<li>left / inline-start</li>
|
||
|
|
</ul>
|
||
|
|
<div class="tab-group" id="tooltip">
|
||
|
|
<pre class="language-html" data-tab="html"><a href="#">Link with a tool tip
|
||
|
|
<div role="tooltip" inert="inert" tip-position="bottom">Tool tip content</div></a><a href="#">Link with a tool tip
|
||
|
|
<tool-tip role="tooltip" inert="inert" tip-position="bottom">Tool tip content</tool-tip></a></pre>
|
||
|
|
<pre class="language-pug" data-tab="pug">a(href="#") Link with a tool tip
|
||
|
|
div(role="tooltip" inert tip-position="bottom") Tool tip content
|
||
|
|
|
||
|
|
a(href="#") Link with a tool tip
|
||
|
|
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content</pre>
|
||
|
|
<pre class="language-css" data-tab="css">/* Position Options
|
||
|
|
- top / block-start
|
||
|
|
- right / inline-end
|
||
|
|
- bottom / block-end
|
||
|
|
- left / inline-start
|
||
|
|
*/
|
||
|
|
[role=tooltip] {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
color: #000;
|
||
|
|
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||
|
|
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 400;
|
||
|
|
inline-size: -webkit-max-content;
|
||
|
|
inline-size: -moz-max-content;
|
||
|
|
inline-size: max-content;
|
||
|
|
line-height: initial;
|
||
|
|
margin: 0;
|
||
|
|
max-inline-size: 25rem;
|
||
|
|
opacity: 0;
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
pointer-events: none;
|
||
|
|
position: absolute;
|
||
|
|
text-align: start;
|
||
|
|
-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||
|
|
-ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||
|
|
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||
|
|
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||
|
|
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
|
|
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
will-change: filter;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
[role=tooltip]::before {
|
||
|
|
clip-path: inset(50%);
|
||
|
|
clip: rect(1px, 1px, 1px, 1px);
|
||
|
|
content: "; Has tooltip: ";
|
||
|
|
height: 1px;
|
||
|
|
margin: -1px;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0;
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
}
|
||
|
|
[role=tooltip]::after {
|
||
|
|
background: #fff;
|
||
|
|
content: "";
|
||
|
|
inset: 0;
|
||
|
|
-webkit-mask: var(--tooltip-pointer);
|
||
|
|
mask: var(--tooltip-pointer);
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=top],
|
||
|
|
[tip-position=block-start],
|
||
|
|
:not([tip-position]),
|
||
|
|
[tip-position=bottom],
|
||
|
|
[tip-position=block-end]) {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=top],
|
||
|
|
[tip-position=block-start],
|
||
|
|
:not([tip-position])) {
|
||
|
|
inset-inline-start: 50%;
|
||
|
|
inset-block-end: calc(100% + 0.75rem + 1rem);
|
||
|
|
--tooltip-x: calc(50% * -1);
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=top],
|
||
|
|
[tip-position=block-start],
|
||
|
|
:not([tip-position]))::after {
|
||
|
|
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
|
||
|
|
inset-block-end: -1rem;
|
||
|
|
-webkit-border-after: 1rem solid transparent;
|
||
|
|
border-block-end: 1rem solid transparent;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=right],
|
||
|
|
[tip-position=inline-end]) {
|
||
|
|
inset-inline-start: calc(100% + 1.5rem + 1rem);
|
||
|
|
inset-block-end: 50%;
|
||
|
|
--tooltip-y: 50%;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=right],
|
||
|
|
[tip-position=inline-end])::after {
|
||
|
|
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
|
||
|
|
inset-inline-start: -1rem;
|
||
|
|
-webkit-border-start: 1rem solid transparent;
|
||
|
|
border-inline-start: 1rem solid transparent;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=bottom],
|
||
|
|
[tip-position=block-end]) {
|
||
|
|
inset-inline-start: 50%;
|
||
|
|
inset-block-start: calc(100% + 0.75rem + 1rem);
|
||
|
|
--tooltip-x: calc(50% * -1);
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=bottom],
|
||
|
|
[tip-position=block-end])::after {
|
||
|
|
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
|
||
|
|
inset-block-start: -1rem;
|
||
|
|
-webkit-border-before: 1rem solid transparent;
|
||
|
|
border-block-start: 1rem solid transparent;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=left],
|
||
|
|
[tip-position=inline-start]) {
|
||
|
|
inset-inline-end: calc(100% + 1.5rem + 1rem);
|
||
|
|
inset-block-end: 50%;
|
||
|
|
--tooltip-y: 50%;
|
||
|
|
}
|
||
|
|
[role=tooltip]:is([tip-position=left],
|
||
|
|
[tip-position=inline-start])::after {
|
||
|
|
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
|
||
|
|
inset-inline-end: -1rem;
|
||
|
|
-webkit-border-end: 1rem solid transparent;
|
||
|
|
border-inline-end: 1rem solid transparent;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
[role=tooltip] {
|
||
|
|
background: #1f2127;
|
||
|
|
color: #fff;
|
||
|
|
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||
|
|
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||
|
|
}
|
||
|
|
[role=tooltip]::after {
|
||
|
|
background: #1f2127;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:has(> [role=tooltip]) {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transition-delay: 300ms;
|
||
|
|
transition-delay: 300ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
|
||
|
|
--tooltip-y: 3px;
|
||
|
|
}
|
||
|
|
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
|
||
|
|
--tooltip-x: calc(-1 * -3px * -1);
|
||
|
|
}
|
||
|
|
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
|
||
|
|
--tooltip-y: -3px;
|
||
|
|
}
|
||
|
|
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
|
||
|
|
--tooltip-x: calc(-1 * 3px * -1);
|
||
|
|
}
|
||
|
|
}</pre>
|
||
|
|
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
|
||
|
|
//- Licensed under CC BY-SA 4.0
|
||
|
|
|
||
|
|
$tooltip-border-radius: .5rem !default;
|
||
|
|
$tooltip-dark-allow: true !default;
|
||
|
|
$tooltip-dark-background: #1f2127 !default;
|
||
|
|
$tooltip-dark-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 50%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 50%)) !default;
|
||
|
|
$tooltip-dark-foreground: #fff !default;
|
||
|
|
$tooltip-light-background: #fff !default;
|
||
|
|
$tooltip-light-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%)) !default;
|
||
|
|
$tooltip-light-foreground: #000 !default;
|
||
|
|
$tooltip-padding-sides: 1.5rem !default;
|
||
|
|
$tooltip-padding-top-bottom: 0.75rem !default;
|
||
|
|
$tooltip-pointer-size: 1rem !default;
|
||
|
|
$tooltip-pointer-bottom: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom / 100% 50% no-repeat !default;
|
||
|
|
$tooltip-pointer-left: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left / 50% 100% no-repeat !default;
|
||
|
|
$tooltip-pointer-right: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right / 50% 100% no-repeat !default;
|
||
|
|
$tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top / 100% 50% no-repeat !default;
|
||
|
|
/* Position Options
|
||
|
|
- top / block-start
|
||
|
|
- right / inline-end
|
||
|
|
- bottom / block-end
|
||
|
|
- left / inline-start
|
||
|
|
*/
|
||
|
|
|
||
|
|
@mixin tooltip {
|
||
|
|
[role="tooltip"] {
|
||
|
|
background: $tooltip-light-background;
|
||
|
|
border-radius: $tooltip-border-radius;
|
||
|
|
color: $tooltip-light-foreground;
|
||
|
|
filter: $tooltip-light-drop-shadow;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 400;
|
||
|
|
inline-size: max-content;
|
||
|
|
line-height: initial;
|
||
|
|
margin: 0;
|
||
|
|
max-inline-size: 25rem;
|
||
|
|
opacity: 0;
|
||
|
|
padding: $tooltip-padding-top-bottom $tooltip-padding-sides;
|
||
|
|
pointer-events: none;
|
||
|
|
position: absolute;
|
||
|
|
text-align: start;
|
||
|
|
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
|
|
user-select: none;
|
||
|
|
will-change: filter;
|
||
|
|
z-index: 10;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
clip-path: inset(50%);
|
||
|
|
clip: rect(1px, 1px, 1px, 1px);
|
||
|
|
content: "; Has tooltip: ";
|
||
|
|
height: 1px;
|
||
|
|
margin: -1px;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0;
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
background: $tooltip-light-background;
|
||
|
|
content: "";
|
||
|
|
inset: 0;
|
||
|
|
mask: var(--tooltip-pointer);
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:is( [tip-position="top"],
|
||
|
|
[tip-position="block-start"],
|
||
|
|
:not([tip-position]),
|
||
|
|
[tip-position="bottom"],
|
||
|
|
[tip-position="block-end"]
|
||
|
|
) {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:is( [tip-position="top"],
|
||
|
|
[tip-position="block-start"],
|
||
|
|
:not([tip-position])
|
||
|
|
) {
|
||
|
|
inset-inline-start: 50%;
|
||
|
|
inset-block-end: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
|
||
|
|
--tooltip-x: calc(50% * -1);
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
--tooltip-pointer: #{$tooltip-pointer-bottom};
|
||
|
|
inset-block-end: calc($tooltip-pointer-size * -1);
|
||
|
|
border-block-end: $tooltip-pointer-size solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:is( [tip-position="right"],
|
||
|
|
[tip-position="inline-end"]
|
||
|
|
) {
|
||
|
|
inset-inline-start: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
|
||
|
|
inset-block-end: 50%;
|
||
|
|
--tooltip-y: 50%;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
--tooltip-pointer: #{$tooltip-pointer-left};
|
||
|
|
inset-inline-start: calc($tooltip-pointer-size * -1);
|
||
|
|
border-inline-start: $tooltip-pointer-size solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&:is( [tip-position="bottom"],
|
||
|
|
[tip-position="block-end"]
|
||
|
|
) {
|
||
|
|
inset-inline-start: 50%;
|
||
|
|
inset-block-start: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
|
||
|
|
--tooltip-x: calc(50% * -1);
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
--tooltip-pointer: #{$tooltip-pointer-top};
|
||
|
|
inset-block-start: calc($tooltip-pointer-size * -1);
|
||
|
|
border-block-start: $tooltip-pointer-size solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&:is( [tip-position="left"],
|
||
|
|
[tip-position="inline-start"]
|
||
|
|
) {
|
||
|
|
inset-inline-end: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
|
||
|
|
inset-block-end: 50%;
|
||
|
|
--tooltip-y: 50%;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
--tooltip-pointer: #{$tooltip-pointer-right};
|
||
|
|
inset-inline-end: calc($tooltip-pointer-size * -1);
|
||
|
|
-webkit-border-end: $tooltip-pointer-size solid transparent;
|
||
|
|
border-inline-end: $tooltip-pointer-size solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@if ($tooltip-dark-allow == true ) {
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
background: $tooltip-dark-background;
|
||
|
|
color: $tooltip-dark-foreground;
|
||
|
|
filter: $tooltip-dark-drop-shadow;
|
||
|
|
&::after {
|
||
|
|
background: $tooltip-dark-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:has(> [role="tooltip"]) {
|
||
|
|
position: relative;
|
||
|
|
&:is(:hover, :focus-visible, :active) > [role="tooltip"] {
|
||
|
|
opacity: 1;
|
||
|
|
transition-delay: 300ms;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
|
||
|
|
:has(> [role="tooltip"]:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) [role="tooltip"] {
|
||
|
|
--tooltip-y: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:has(> [role="tooltip"]:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) [role="tooltip"] {
|
||
|
|
--tooltip-x: calc(-1 * -3px * -1);
|
||
|
|
}
|
||
|
|
|
||
|
|
:has(> [role="tooltip"]:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) [role="tooltip"] {
|
||
|
|
--tooltip-y: -3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:has(> [role="tooltip"]:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) [role="tooltip"] {
|
||
|
|
--tooltip-x: calc(-1 * 3px * -1);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}</pre>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|