Chainwise Tooltip Promotor

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

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

(I already have a user script manager, let me install it!)

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.

(I already have a user style manager, let me install it!)

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