Запиливаем удобный блок донатов в WordPress

Итак, решил реанимировать свой сайт и заодно подправить страницу профайл и добавил туда блок помощи, кстати, если есть возможность, то можете воспользоваться этой возможностью и поддержать меня.

Сначала добавил обычный текстовый блок, но вряд ли кто-то станет выделять и копировать текст для того чтобы отправить куда-то деньги, тогда я захотел немного упросить процесс и решил подключить javascript для решения этой задачи. От поиска готового решения для WP отказался так как для такой ерунды это не целесообразно, а всевозможные расширения и специальные плагины еще и слишком ресурсоемкие, к тому же я вспомнил что Я Ж программист и решил самостоятельно на коленки сделать свое решение. Как по мне так получилось достаточно неплохо, результат можете посмотреть тут ( а заодно и воспользоваться функционалом =) )

Итак, вот код:

Добавляем в стили шаблона css

.term {
	cursor: pointer;
	color: #2f8eff;
	text-decoration: none;
	border-bottom: 1px dashed #2f8eff;
}
.term:after {
	padding-left: 3px;
	content: url('/uploads/donate/copy.svg');
	display: inline-block;
	width: 20px;
	height: 20px;
}
.tooltiped {
	position: relative;
}
.tooltiped .tooltip {
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	transition: ease 1s;
	background-color: #FFF;
	z-index: 999;
}
.tooltiped:hover .tooltip {
	position: absolute;
	top: 20px;
	visibility: visible;
	opacity: 1;
}
.tooltiped .tooltip .tooltip-content {
	max-width: 150px;
}
.tooltiped .tooltip .tooltip-content img {
	width: 200px;
}
.tooltiped .tooltip .tooltip-content,
.tooltiped .tooltip .tooltip-content a {
	color: #fff;
}
.promp {
	border-radius: 3px;
	background: rgba(47, 142, 255, 0.5);
	position: absolute;
	top: -40px;
	right: -100px;
	padding: 3px;
}

Добавляем в шаблон небольшой javascript:

    window.onload = () => {
        document.querySelectorAll(".term").forEach(function(e) {
            e.addEventListener("click", function() {
                navigator.clipboard.writeText(e.innerText).then(function() {
                    e.insertAdjacentHTML('beforebegin', '<div class="promp">скопировано</div>');
                    setTimeout(function(){
                        document.querySelectorAll(".tooltiped .promp").forEach(function(p) {
                            p.remove();
                        });
                    },1000);
                }).catch(function (error) {
                    console.error('Error:', error);
                });
            });
            e.addEventListener("mouseover", () => {
                e.insertAdjacentHTML('afterEnd', '<div class="tooltip"><div class="tooltip-content"><img src="' + e.dataset.url + '" /></div></div>');
            });
        });
    }

Ну и собственно блок с реквизитами:

<p>
    <span class="tooltiped">
        <strong>Карта ( Т-банк ):</strong> <span class="term" data-url="">5536913774062992</span><br>
    </span>
    <span class="tooltiped">
        <strong>USDT (Сеть Solana):</strong> <span class="term" data-url="/uploads/donate/USDT.jpg">HEzoskh3Gmehztu578DWFzq3PBmsoCZSVkzM25AYtCmQ</span> <br>
    </span>
    <span class="tooltiped">
        <strong>BTC:</strong> <span class="term" data-url="/uploads/donate/BTC.jpg">bc1qmnze7qda4eutpzyzjesyr05p0cf4myfrppqz2f</span><br>
    </span>
    <span class="tooltiped">
        <strong>TON:</strong> <span class="term" data-url="/uploads/donate/TON.jpg">UQC7ZauWx4qlSknEd-Ag9NEF5jXq3QT7sd8nJtWRPgWdWBj0</span><br>
    </span>
    <span class="tooltiped">
        <strong>Litecoin:</strong> <span class="term" data-url="/uploads/donate/LTC.jpg">ltc1qlphwcvh0lzmewuupjas3k2uh6d5sjdpcnxyvp0</span><br>
    </span>
    <span class="tooltiped">
        <strong>Ethereum:</strong> <span class="term" data-url="/uploads/donate/ETH.jpg">0x834C17E4bd362AAd6Ba85A665197DE3111f9b7D2</span><br>
    </span>
    <span class="tooltiped">
        <strong>DASH:</strong> <span class="term" data-url="/uploads/donate/DASH.jpg">XgkG5z3zoUATHCKWAP9W76qMTR8938J5ev</span><br>
    </span>
    <span class="tooltiped">
        <strong>XRP:</strong> <span class="term" data-url="/uploads/donate/XRP.jpg">rLnU6E5DSpWNeo2xEDfARpo2jDR1ymWRkh</span><br>
    </span>
    <span class="tooltiped">
        <strong>XLM:</strong> <span class="term" data-url="/uploads/donate/XLM.jpg">GDV3OMVJYL6LJI2HKXNBKQYYVTBQ3LY2LOX2DZVNCYPXV26JI4BZJNLX</span><br>
    </span>
    <span class="tooltiped">
        <strong>HBAR:</strong> <span class="term" data-url="/uploads/donate/HBAR.jpg">0.0.5028861</span><br>
    </span>
    <span class="tooltiped">
        <strong>Solana:</strong> <span class="term" data-url="/uploads/donate/SOL.jpg">HEzoskh3Gmehztu578DWFzq3PBmsoCZSVkzM25AYtCmQ</span><br>
    </span>
    <span class="tooltiped">
        <strong>Cardano:</strong> <span class="term" data-url="/uploads/donate/ADA.jpg">addr1v9pkq5weeqz33kc8aljul5wj4yslr8zxe6flwfan2psvquszy73dg</span>
    </span>
</p>

Готово! =)