پیشنمایش زنده
کد HTML
<button class="btn-copy">
<span
data-text-end="Copied!"
data-text-initial="Copy to clipboard"
class="cp-tooltip"
></span>
<span>
<svg
xml:space="preserve"
style="enable-background:new 0 0 512 512"
viewBox="0 0 6.35 6.35"
y="0"
x="0"
height="20"
width="20"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
class="cp-clipboard"
>
<g>
<path
fill="currentColor"
d="M2.43.265c-.3 0-.548.236-.573.53h-.328a.74.74 0 0 0-.735.734v3.822a.74.74 0 0 0 .735.734H4.82a.74.74 0 0 0 .735-.734V1.529a.74.74 0 0 0-.735-.735h-.328a.58.58 0 0 0-.573-.53zm0 .529h1.49c.032 0 .049.017.049.049v.431c0 .032-.017.049-.049.049H2.43c-.032 0-.05-.017-.05-.049V.843c0-.032.018-.05.05-.05zm-.901.53h.328c.026.292.274.528.573.528h1.49a.58.58 0 0 0 .573-.529h.328a.2.2 0 0 1 .206.206v3.822a.2.2 0 0 1-.206.205H1.53a.2.2 0 0 1-.206-.205V1.529a.2.2 0 0 1 .206-.206z"
></path>
</g>
</svg>
<svg
xml:space="preserve"
style="enable-background:new 0 0 512 512"
viewBox="0 0 24 24"
y="0"
x="0"
height="18"
width="18"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
class="cp-check-mark"
>
<g>
<path
data-original="#000000"
fill="currentColor"
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
></path>
</g>
</svg>
</span>
</button>
کد CSS
/* tooltip settings 👇 */
.btn-copy {
/* button */
--button-bg: #353434;
--button-hover-bg: #464646;
--button-text-color: #cccccc;
--button-hover-text-color: #8bb9fe;
--button-border-radius: 10px;
--button-diameter: 36px;
--button-outline-width: 1px;
--button-outline-color: rgb(141, 141, 141);
/* tooltip */
--tooltip-bg: #f4f3f3;
--toolptip-border-radius: 4px;
--tooltip-font-family: Menlo, Roboto Mono, monospace;
/* 👆 this field should not be empty */
--tooltip-font-size: 12px;
/* 👆 this field should not be empty */
--tootip-text-color: rgb(50, 50, 50);
--tooltip-padding-x: 7px;
--tooltip-padding-y: 7px;
--tooltip-offset: 8px;
/* --tooltip-transition-duration: 0.3s; */
/* 👆 if you need a transition,
just remove the comment,
but I didn't like the transition :| */
}
.btn-copy {
box-sizing: border-box;
width: var(--button-diameter);
height: var(--button-diameter);
border-radius: var(--button-border-radius);
background-color: var(--button-bg);
color: var(--button-text-color);
border: none;
cursor: pointer;
position: relative;
outline: none;
}
.btn-copy > .cp-tooltip {
position: absolute;
opacity: 0;
visibility: 0;
top: 0;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font: var(--tooltip-font-size) var(--tooltip-font-family);
color: var(--tootip-text-color);
background: var(--tooltip-bg);
padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
border-radius: var(--toolptip-border-radius);
pointer-events: none;
transition: all var(--tooltip-transition-duration)
cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn-copy > .cp-tooltip::before {
content: attr(data-text-initial);
}
.btn-copy > .cp-tooltip::after {
content: "";
position: absolute;
bottom: calc(var(--tooltip-padding-y) / 2 * -1);
width: var(--tooltip-padding-y);
height: var(--tooltip-padding-y);
background: inherit;
left: 50%;
transform: translateX(-50%) rotate(45deg);
z-index: -999;
pointer-events: none;
}
.btn-copy svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cp-check-mark {
display: none;
}
/* actions */
.btn-copy:hover .cp-tooltip,
.btn-copy:focus:not(:focus-visible) .cp-tooltip {
opacity: 1;
visibility: visible;
top: calc((100% + var(--tooltip-offset)) * -1);
}
.btn-copy:focus:not(:focus-visible) .cp-tooltip::before {
content: attr(data-text-end);
}
.btn-copy:focus:not(:focus-visible) .cp-clipboard {
display: none;
}
.btn-copy:focus:not(:focus-visible) .cp-check-mark {
display: block;
}
.btn-copy:hover,
.btn-copy:focus {
background-color: var(--button-hover-bg);
}
.btn-copy:active {
outline: var(--button-outline-width) solid var(--button-outline-color);
}
.btn-copy:hover svg {
color: var(--button-hover-text-color);
}