|
1 2 3 4 |
<button data-template="wn1">Кнопка</button> <div id="wn1" style="display: none;"> <div>Самый распространенный цвет сияния в природе, но при этом всегда уникальное и неповторимое, как и большое множество проектов.</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$color_bg: #5236AF .tippy-box[data-theme~='custom'] background-color: $color_bg color: #fff border-radius: 20px padding: 10px div font-size: clamp(12px, 1.5vw, 16px) p:last-child margin: 0 .tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before border-top-color: $color_bg .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before border-bottom-color: $color_bg .tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before border-left-color: $color_bg .tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before border-right-color: $color_bg |
|
1 2 3 4 5 6 7 8 9 10 11 |
window.addEventListener("load", () => { tippy("button", { content(reference) { const id = reference.getAttribute("data-template"); const template = document.getElementById(id); return template?.innerHTML || "Нет содержимого в данном блоке"; }, theme: "custom", allowHTML: true, }); }); |