Adds a floating tooltip with the ASMR's tags when you hover over the thumbnail.
// ==UserScript==
// @name Japanese ASMR Tags Tooltip on hover
// @namespace https://www.swcombine.com/
// @version 1.0
// @description Adds a floating tooltip with the ASMR's tags when you hover over the thumbnail.
// @author code-syl
// @match https://japaneseasmr.com/*
// @icon https://external-content.duckduckgo.com/ip3/japaneseasmr.com.ico
// @grant none
// @require https://code.jquery.com/jquery-3.6.3.min.js
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const styles = `
.op-square:hover .syl-tooltip {
display: flex;
}
.syl-tooltip {
display: none;
flex-direction: row;
justify-content: center;
gap: .5em;
flex-wrap: wrap;
background: #262626;
padding: .7em !important;
max-width: 100%;
align-self: center;
z-index: 1000;
}
`;
/* add custom styles to the page */
let styleSheet = document.createElement('style');
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
/**
* Inserts a node after another node
* @param {Node} referenceNode A node to insert the new node after
* @param {Node} newNode The node to insert
*/
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
const onLoad = () => {
const mainThumbnails = document.querySelectorAll('.site-archive-post .op-square');
mainThumbnails.forEach((thumbnail) => {
const link = thumbnail.querySelector('a');
let tooltip = document.createElement('div');
tooltip.classList.add('syl-tooltip', 'post-meta', 'post-tags');
insertAfter(link, tooltip);
$.get(link.href, (data) => {
const tags = $(data).find('a[rel=tag]').toArray();
tags.forEach((tag) => {
tooltip.appendChild(tag);
});
});
});
};
window.addEventListener('load', onLoad, false);
})();