☰

Japanese ASMR Tags Tooltip on hover

Adds a floating tooltip with the ASMR's tags when you hover over the thumbnail.

As of 2023-01-16. See the latest version.

// ==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);
})();