Chainwise Tooltip Promotor

Haalt een specifieke tooltip-tekst op en toont deze in een rode balk onder de paginatitel.

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

You will need to install an extension such as Tampermonkey to install this script.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==UserScript==
// @name         Chainwise Tooltip Promotor
// @namespace    http://tampermonkey.net/
// @version      2025.1.1
// @description  Haalt een specifieke tooltip-tekst op en toont deze in een rode balk onder de paginatitel.
// @author       Gijs Hofman
// @match        https://heldertelecom.chainwisehosted.nl/modules/helpdesk/calls_vw.asp*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 1. Definieer de selector voor de specifieke tooltip.
    // Dit element is de SPAN die het 'title' attribuut (de tooltip-tekst) bevat.
    const tooltipSelector = '.page-header-subtitle span[data-toggle="tooltip"';

    // 2. Zoek de elementen op de pagina
    const tooltipElement = document.querySelector(tooltipSelector);
    const headerWrap = document.getElementById('page-header-title-wrap');

    // 3. Controleer of de tooltip én de header-container zijn gevonden
    if (tooltipElement && headerWrap) {
        // Haal de tooltip-tekst op uit het 'title' attribuut
        const tooltipText = tooltipElement.getAttribute('title');

        if (tooltipText) {
            // 4. Creëer de nieuwe rode meldingenbalk (DIV)
            const warningBar = document.createElement('div');

            // Toepassen van inline stijlen voor de rode balk en zwarte tekst
            warningBar.style.cssText = `
                background-color: #ce1616; /* Lichtrode achtergrond */
                color: #ffffff; /* Zwarte tekst */
                border: 1px solid #f5c6cb; /* Donkerdere rand */
                padding: 10px;
                margin-top: 15px; /* Ruimte onder de subtitel */
                margin-bottom: 5px;
                border-radius: 4px;
                font-weight: bold;
                white-space: pre-wrap; /* Belangrijk voor het behoud van regeleinden als deze in de titel staan */
            `;

            // Zet de tooltip tekst in de nieuwe balk
            warningBar.textContent = tooltipText;

            // 5. Voeg de nieuwe balk toe aan de header-container, direct na de subtitel (p.page-header-subtitle)
            const subtitle = headerWrap.querySelector('.page-header-subtitle');

            if (subtitle) {
                subtitle.parentNode.insertBefore(warningBar, subtitle.nextSibling);
            } else {
                // Als er geen subtitel is, voeg de balk dan toe aan het einde van de header-wrap
                headerWrap.appendChild(warningBar);
            }

            console.log("Tooltip-tekst succesvol als rode balk toegevoegd.");
        }
    }
})();