phpBB Stylext

Board Custom Tooltip remplace les infobulles natives du navigateur, générées à partir de l'attribut title, par des infobulles personnalisées et entièrement intégrées au style du forum.

Fonctionnalités

Infobulles personnalisées avec un rendu plus élégant et cohérent avec le thème du forum.
Apparition progressive avec un effet de transparence.
Positionnement intelligent sous l'élément survolé, avec déplacement automatique au-dessus lorsque l'espace disponible est insuffisant.
Petite flèche indiquant clairement l'élément concerné.
Compatibilité avec les appareils tactiles.
Prise en charge du clavier pour les éléments accessibles au focus.
Retour au tooltip natif du navigateur lorsque l'utilisateur désactive l'option.
Préférence individuelle : chaque utilisateur peut choisir d'utiliser ou non les infobulles personnalisées.
Le réglage est disponible dans PCU → Préférences → Modifier les options d'affichage.
L'attribut title d'origine est conservé et restauré automatiquement lorsque l'infobulle personnalisée n'est plus affichée.
Utilisation

L'extension fonctionne automatiquement après son activation. Les utilisateurs peuvent à tout moment choisir entre les infobulles personnalisées et les infobulles natives du navigateur depuis leurs préférences.

: customtooltip.png (10.76 Kio) Vu 384 fois

: customtooltip.png (10.76 Kio) Vu 384 fois

Board Custom Tooltip replaces native browser tooltips generated from the title attribute with customized tooltips that are fully integrated into the forum's style.

Features

Custom tooltips with a more elegant appearance that matches the forum's theme.
Smooth fade-in effect with transparency.
Smart positioning below the hovered element, automatically moving above it when there is not enough available space.
Small arrow clearly indicating the element concerned.
Compatibility with touch devices.
Keyboard support for focusable elements.
Returns to the browser's native tooltip when the user disables the option.
Individual preference: each user can choose whether to use custom tooltips.
The setting is available under User Control Panel → Preferences → Edit display options.
The original title attribute is preserved and automatically restored when the custom tooltip is no longer displayed.

Usage

The extension works automatically once enabled. Users can switch at any time between custom tooltips and the browser's native tooltips from their preferences.

: customtooltip.png (10.52 Kio) Vu 382 fois

: customtooltip.png (10.52 Kio) Vu 382 fois

Qu'est-ce qui fait que le tooltip s'affiche sur le bas ? Si je veux qu'il s'affiche sur le haut qu'est-ce que je dois modifier et ou ?

C'est principalement le JavaScript, dans la fonction positionTooltip(), dans le fichier customtooltip.js il y a ce bloc qui force l'affichage systématiquement au-dessus

Code: Tout sélectionner

        if (isPointerPositioned && typeof pointerX === 'number' && typeof pointerY === 'number')
        {
            left = pointerX - (tooltipRect.width / 2);
            top = pointerY + gap;
        }
        else
        {
            left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
            top = rect.bottom + gap;
        }

Il faut remplacer par ce bloc

Code: Tout sélectionner

       if (isPointerPositioned && typeof pointerX === 'number' && typeof pointerY === 'number')
        {
            left = pointerX - (tooltipRect.width / 2);
            top = pointerY - tooltipRect.height - gap;
        }
        else
        {
            left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
            top = rect.top - tooltipRect.height - gap;
        }

Il faudra modifier le sens de la flèche, dans le CSS se trouve cette classe .caforum-global-tooltip.caforum-tooltip-above qui sert à placer la flèche en dessous du tooltip.
Le JS ajoute cette classe seulement lorsqu'il n'y a plus assez de place en bas :

Code: Tout sélectionner

        if (top + tooltipRect.height > window.innerHeight - margin)
        {
            if (isPointerPositioned && typeof pointerY === 'number')
            {
                top = pointerY - tooltipRect.height - gap;
            }
            else
            {
                top = rect.top - tooltipRect.height - gap;
            }

            tooltip.classList.add('caforum-tooltip-above');
        }

Si tu veux que le tooltip soit toujours au-dessus, il faut ajouter tooltip.classList.add('caforum-tooltip-above'); juste après tooltip.classList.remove('caforum-tooltip-above');

Donc :

Code: Tout sélectionner

            tooltip.classList.add('caforum-tooltip-above');
            tooltip.classList.remove('caforum-tooltip-above');

Mais il y a une petite subtilité : le code actuel prévoit déjà un retournement automatique lorsque le tooltip ne tient pas dans la fenêtre. Si tu veux toujours au-dessus sauf lorsqu'il n'y a réellement pas assez de place, je te conseille de conserver cette logique plutôt que de la supprimer.

Dans le fichier js remplace ce bloc :

Code: Tout sélectionner

        if (isPointerPositioned && typeof pointerX === 'number' && typeof pointerY === 'number')
        {
            left = pointerX - (tooltipRect.width / 2);
            top = pointerY + gap;
        }
        else
        {
            left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
            top = rect.bottom + gap;
        }

        tooltip.classList.remove('caforum-tooltip-above');

Par celui-ci :

Code: Tout sélectionner

        if (isPointerPositioned && typeof pointerX === 'number' && typeof pointerY === 'number')
        {
            left = pointerX - (tooltipRect.width / 2);
            top = pointerY - tooltipRect.height - gap;
        }
        else
        {
            left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
            top = rect.top - tooltipRect.height - gap;
        }

        tooltip.classList.add('caforum-tooltip-above');

Plus bas dans la fonction, tu as :

Code: Tout sélectionner

        if (top + tooltipRect.height > window.innerHeight - margin)
        {
            if (isPointerPositioned && typeof pointerY === 'number')
            {
                top = pointerY - tooltipRect.height - gap;
            }
            else
            {
                top = rect.top - tooltipRect.height - gap;
            }

            tooltip.classList.add('caforum-tooltip-above');
        }

A remplacer par :

Code: Tout sélectionner

        if (top < margin)
        {
            if (isPointerPositioned && typeof pointerY === 'number')
            {
                top = pointerY + gap;
            }
            else
            {
                top = rect.bottom + gap;
            }

            tooltip.classList.remove('caforum-tooltip-above');
        }

Fichier js de remplacement

customtooltip.js.zip: (1.76 Kio) Téléchargé 33 fois

customtooltip.js.zip: (1.76 Kio) Téléchargé 33 fois

Mise à jour en version 1.0.1

Notes de version

Ajout d’un léger délai de 400 ms avant l’affichage des infobulles afin d’éviter leur apparition immédiate lors du simple passage de la souris.
Correction du positionnement des infobulles sur les pages viewforum et viewtopic : elles sont désormais correctement positionnées au-dessus du pointeur de la souris, comme les autres infobulles.
Amélioration du positionnement automatique : l’infobulle se place au-dessus du pointeur par défaut et bascule en dessous lorsqu’il n’y a pas suffisamment d’espace disponible.
Adaptation du background de l’infobulle aux couleurs du style du forum (forabg / forumbg).
Conservation de la couleur du texte en #eee.
Amélioration de la cohérence de la flèche avec la couleur du background de l’infobulle.

First post update - version 1.0.1

Release notes

Added a slight 400 ms delay before displaying tooltips to prevent them from appearing immediately when simply hovering over an element.
Fixed tooltip positioning on the viewforum and viewtopic pages: tooltips are now correctly positioned above the mouse pointer, like other tooltips.
Improved automatic positioning: the tooltip is displayed above the mouse pointer by default and moves below it when there is not enough space available.
The tooltip background now adapts to the forum style colors (forabg / forumbg).
The text color remains #eee.
Improved consistency of the tooltip arrow with the tooltip background color.

Fonction tooltip vers le bas

Code: Tout sélectionner

   function positionTooltip(element, x, y)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var rect = element.getBoundingClientRect();
        var tooltipRect = tooltip.getBoundingClientRect();
        var gap = 12;
        var margin = 8;
        var left;
        var top;

        if (typeof x === 'number' && typeof y === 'number')
        {
            left = x - (tooltipRect.width / 2);
            top = y + gap;

            tooltip.classList.remove('caforum-tooltip-above');
        }
        else
        {
            left = rect.left +
                 (rect.width / 2) -
                 (tooltipRect.width / 2);

        top = rect.bottom + gap;

        tooltip.classList.remove('caforum-tooltip-above');
    }

Fonction tooltip vers le haut

Code: Tout sélectionner

    function positionTooltip(element, x, y)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var rect = element.getBoundingClientRect();
        var tooltipRect = tooltip.getBoundingClientRect();
        var gap = 12;
        var margin = 8;

        var left;
        var top;

        if (typeof x === 'number' && typeof y === 'number')
        {
            left = x - (tooltipRect.width / 2);
            top = y - tooltipRect.height - gap;

            tooltip.classList.add('caforum-tooltip-above');
        }
        else
        {
            left = rect.left +
                (rect.width / 2) -
                (tooltipRect.width / 2);

            top = rect.top -
                tooltipRect.height -
                gap;

            tooltip.classList.add('caforum-tooltip-above');
        }

        if (left < margin)
        {
            left = margin;
        }

        if (left + tooltipRect.width >
            window.innerWidth - margin)
        {
            left =
                window.innerWidth -
                tooltipRect.width -
                margin;
        }

        if (top < margin)
        {
            if (typeof x === 'number' &&
                typeof y === 'number')
            {
                top = y + gap;
            }
            else
            {
                top = rect.bottom + gap;
            }

            tooltip.classList.remove('caforum-tooltip-above');
        }

        tooltip.style.left = Math.round(left) + 'px';
        tooltip.style.top = Math.round(top) + 'px';
    }

Deux fichiers JS sont disponibles pour afficher le tooltip au-dessus ou en^dessous par défaut.

On a maintenant les bons paramètres :

400 ms avant apparition
Tooltip au-dessus par défaut
18 px d'écart au-dessus
Bascule en dessous avec 12 px si nécessaire
Le tooltip ne suit pas le curseur
Background adapté au style (forabg / forumbg)
Code couleur du texte #eee
➤ Flèche cohérente avec le background
Gestion tactile conservée
Positionnement corrigé pour viewforum et viewtopic

Code tooltip affichage au-dessus

Code: Tout sélectionner

(function () {
    'use strict';

    var activeElement = null;
    var activeTitle = null;
    var tooltip = null;
    var hideTimer = null;
    var showTimer = null;

    var pointerX = null;
    var pointerY = null;

    var showDelay = 400;

    function createTooltip()
    {
        if (tooltip)
        {
            return tooltip;
        }

        tooltip = document.createElement('div');
        tooltip.className = 'caforum-global-tooltip';
        tooltip.setAttribute('role', 'tooltip');
        tooltip.setAttribute('aria-hidden', 'true');
        document.body.appendChild(tooltip);

        return tooltip;
    }

    function isExcluded(element)
    {
        return !element ||
            element.nodeType !== 1 ||
            element.classList.contains('no-caforum-tooltip') ||
            element.hasAttribute('data-no-caforum-tooltip');
    }

    function getTarget(target)
    {
        if (!target || !target.closest)
        {
            return null;
        }

        var element = target.closest('[title], .caforum-custom-tooltip-active');

        return isExcluded(element) ? null : element;
    }

    function positionTooltip(element, x, y)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var rect = element.getBoundingClientRect();
        var tooltipRect = tooltip.getBoundingClientRect();
        var topGap = 18;
        var bottomGap = 12;
        var margin = 8;
        var left;
        var top;

        tooltip.classList.add('caforum-tooltip-above');

        if (typeof x === 'number' && typeof y === 'number')
        {
            left = x - (tooltipRect.width / 2);
            top = y - tooltipRect.height - topGap;
        }
        else
        {
            left = rect.left +
                (rect.width / 2) -
                (tooltipRect.width / 2);

            top = rect.top -
                tooltipRect.height -
                topGap;
        }

        if (left < margin)
        {
            left = margin;
        }

        if (left + tooltipRect.width >
            window.innerWidth - margin)
        {
            left =
                window.innerWidth -
                tooltipRect.width -
                margin;
        }

        if (top < margin)
        {
            if (typeof x === 'number' && typeof y === 'number')
            {
                top = y + bottomGap;
            }
            else
            {
                top = rect.bottom + bottomGap;
            }

            tooltip.classList.remove('caforum-tooltip-above');
        }

        tooltip.style.left = Math.round(left) + 'px';
        tooltip.style.top = Math.round(top) + 'px';
    }

    function restoreTitle()
    {
        if (activeElement && activeTitle !== null)
        {
            activeElement.setAttribute('title', activeTitle);
            activeElement.classList.remove('caforum-custom-tooltip-active');
        }

        activeElement = null;
        activeTitle = null;
    }

    function hideTooltip()
    {
        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        if (tooltip)
        {
            tooltip.classList.remove('caforum-tooltip-visible');
            tooltip.setAttribute('aria-hidden', 'true');
        }

        restoreTitle();
    }

    function updateTooltipColors(element)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var container = element.closest('.forabg, .forumbg');

        if (!container)
        {
            return;
        }

        var style = window.getComputedStyle(container);
        var backgroundColor = style.backgroundColor;

        if (backgroundColor &&
            backgroundColor !== 'transparent' &&
            backgroundColor !== 'rgba(0, 0, 0, 0)')
        {
            tooltip.style.setProperty(
                '--caforum-tooltip-bg',
                backgroundColor
            );
        }
    }

    function showTooltip(element, x, y)
    {
        if (isExcluded(element))
        {
            return;
        }

        var title = element.getAttribute('title');

        if (!title)
        {
            return;
        }

        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        if (activeElement && activeElement !== element)
        {
            hideTooltip();
        }

        activeElement = element;
        activeTitle = title;

        pointerX = x;
        pointerY = y;

        element.removeAttribute('title');
        element.classList.add('caforum-custom-tooltip-active');

        showTimer = window.setTimeout(function () {
            if (activeElement !== element)
            {
                return;
            }

            var customTooltip = createTooltip();

            updateTooltipColors(element);

            customTooltip.textContent = title;
            customTooltip.setAttribute('aria-hidden', 'false');
            customTooltip.classList.add('caforum-tooltip-visible');

            positionTooltip(
                element,
                pointerX,
                pointerY
            );
        }, showDelay);
    }

    function delayedHide()
    {
        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        hideTimer = window.setTimeout(
            hideTooltip,
            50
        );
    }

    function handlePointerOver(event)
    {
        if (event.pointerType === 'touch')
        {
            return;
        }

        pointerX = event.clientX;
        pointerY = event.clientY;

        var element = getTarget(event.target);

        if (element && element !== activeElement)
        {
            showTooltip(
                element,
                pointerX,
                pointerY
            );
        }
    }

    function handlePointerMove(event)
    {
        if (event.pointerType === 'touch')
        {
            return;
        }

        if (!activeElement)
        {
            return;
        }
    }

    function handlePointerOut(event)
    {
        if (!activeElement ||
            event.pointerType === 'touch')
        {
            return;
        }

        var element = event.target.closest(
            '[title], .caforum-custom-tooltip-active'
        );

        if (element !== activeElement)
        {
            return;
        }

        if (event.relatedTarget &&
            activeElement.contains(event.relatedTarget))
        {
            return;
        }

        delayedHide();
    }

    function handleFocusIn(event)
    {
        var element = getTarget(event.target);

        if (element)
        {
            showTooltip(element);
        }
    }

    function handleFocusOut(event)
    {
        if (activeElement === event.target)
        {
            delayedHide();
        }
    }

    function handleTouchStart(event)
    {
        var element = getTarget(event.target);

        if (!element)
        {
            hideTooltip();
            return;
        }

        if (activeElement === element)
        {
            hideTooltip();
            return;
        }

        showTooltip(element);

        clearTimeout(showTimer);

        var customTooltip = createTooltip();

        updateTooltipColors(element);

        customTooltip.textContent =
            element.getAttribute('title') ||
            activeTitle;

        customTooltip.setAttribute(
            'aria-hidden',
            'false'
        );

        customTooltip.classList.add(
            'caforum-tooltip-visible'
        );

        positionTooltip(element);

        clearTimeout(hideTimer);

        hideTimer = window.setTimeout(
            hideTooltip,
            4000
        );
    }

    function updatePosition()
    {
        if (activeElement &&
            tooltip &&
            tooltip.classList.contains(
                'caforum-tooltip-visible'
            ))
        {
            if (typeof pointerX === 'number' &&
                typeof pointerY === 'number')
            {
                positionTooltip(
                    activeElement,
                    pointerX,
                    pointerY
                );
            }
            else
            {
                positionTooltip(
                    activeElement
                );
            }
        }
    }

    function init()
    {
        document.addEventListener(
            'pointerover',
            handlePointerOver
        );

        document.addEventListener(
            'pointermove',
            handlePointerMove
        );

        document.addEventListener(
            'pointerout',
            handlePointerOut
        );

        document.addEventListener(
            'focusin',
            handleFocusIn
        );

        document.addEventListener(
            'focusout',
            handleFocusOut
        );

        document.addEventListener(
            'touchstart',
            handleTouchStart,
            { passive: true }
        );

        window.addEventListener(
            'scroll',
            updatePosition,
            true
        );

        window.addEventListener(
            'resize',
            updatePosition
        );

        window.addEventListener(
            'beforeunload',
            restoreTitle
        );
    }

    if (document.readyState === 'loading')
    {
        document.addEventListener(
            'DOMContentLoaded',
            init
        );
    }
    else
    {
        init();
    }
}());

Code tooltip affichage en-dessous

Code: Tout sélectionner

(function () {
    'use strict';

    var activeElement = null;
    var activeTitle = null;
    var tooltip = null;
    var hideTimer = null;
    var showTimer = null;

    var pointerX = null;
    var pointerY = null;

    var showDelay = 400;

    function createTooltip()
    {
        if (tooltip)
        {
            return tooltip;
        }

        tooltip = document.createElement('div');
        tooltip.className = 'caforum-global-tooltip';
        tooltip.setAttribute('role', 'tooltip');
        tooltip.setAttribute('aria-hidden', 'true');
        document.body.appendChild(tooltip);

        return tooltip;
    }

    function isExcluded(element)
    {
        return !element ||
            element.nodeType !== 1 ||
            element.classList.contains('no-caforum-tooltip') ||
            element.hasAttribute('data-no-caforum-tooltip');
    }

    function getTarget(target)
    {
        if (!target || !target.closest)
        {
            return null;
        }

        var element = target.closest('[title], .caforum-custom-tooltip-active');

        return isExcluded(element) ? null : element;
    }

    function positionTooltip(element, x, y)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var rect = element.getBoundingClientRect();
        var tooltipRect = tooltip.getBoundingClientRect();
        var gap = 12;
        var bottomGap = 18;
        var margin = 8;
        var left;
        var top;

        if (typeof x === 'number' && typeof y === 'number')
        {
            left = x - (tooltipRect.width / 2);
            top = y + bottomGap;

            tooltip.classList.remove('caforum-tooltip-above');
        }
        else
        {
            left = rect.left +
                (rect.width / 2) -
                (tooltipRect.width / 2);

            top = rect.bottom + bottomGap;

            tooltip.classList.remove('caforum-tooltip-above');
        }

        if (left < margin)
        {
            left = margin;
        }

        if (left + tooltipRect.width >
            window.innerWidth - margin)
        {
            left =
                window.innerWidth -
                tooltipRect.width -
                margin;
        }

        if (top + tooltipRect.height >
            window.innerHeight - margin)
        {
            if (typeof x === 'number' &&
                typeof y === 'number')
            {
                top = y -
                    tooltipRect.height -
                    gap;
            }
            else
            {
                top = rect.top -
                    tooltipRect.height -
                    gap;
            }

            tooltip.classList.add('caforum-tooltip-above');
        }

        tooltip.style.left = Math.round(left) + 'px';
        tooltip.style.top = Math.round(top) + 'px';
    }

    function restoreTitle()
    {
        if (activeElement && activeTitle !== null)
        {
            activeElement.setAttribute('title', activeTitle);
            activeElement.classList.remove('caforum-custom-tooltip-active');
        }

        activeElement = null;
        activeTitle = null;
    }

    function hideTooltip()
    {
        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        if (tooltip)
        {
            tooltip.classList.remove('caforum-tooltip-visible');
            tooltip.setAttribute('aria-hidden', 'true');
        }

        restoreTitle();
    }

    function updateTooltipColors(element)
    {
        if (!tooltip || !element)
        {
            return;
        }

        var container = element.closest('.forabg, .forumbg');

        if (!container)
        {
            return;
        }

        var style = window.getComputedStyle(container);
        var backgroundColor = style.backgroundColor;

        if (backgroundColor &&
            backgroundColor !== 'transparent' &&
            backgroundColor !== 'rgba(0, 0, 0, 0)')
        {
            tooltip.style.setProperty(
                '--caforum-tooltip-bg',
                backgroundColor
            );
        }
    }

    function showTooltip(element, x, y)
    {
        if (isExcluded(element))
        {
            return;
        }

        var title = element.getAttribute('title');

        if (!title)
        {
            return;
        }

        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        if (activeElement && activeElement !== element)
        {
            hideTooltip();
        }

        activeElement = element;
        activeTitle = title;

        pointerX = x;
        pointerY = y;

        element.removeAttribute('title');
        element.classList.add('caforum-custom-tooltip-active');

        showTimer = window.setTimeout(function () {
            if (activeElement !== element)
            {
                return;
            }

            var customTooltip = createTooltip();

            updateTooltipColors(element);

            customTooltip.textContent = title;
            customTooltip.setAttribute('aria-hidden', 'false');
            customTooltip.classList.add('caforum-tooltip-visible');

            positionTooltip(
                element,
                pointerX,
                pointerY
            );
        }, showDelay);
    }

    function delayedHide()
    {
        clearTimeout(hideTimer);
        clearTimeout(showTimer);

        hideTimer = window.setTimeout(
            hideTooltip,
            50
        );
    }

    function handlePointerOver(event)
    {
        if (event.pointerType === 'touch')
        {
            return;
        }

        pointerX = event.clientX;
        pointerY = event.clientY;

        var element = getTarget(event.target);

        if (element && element !== activeElement)
        {
            showTooltip(
                element,
                pointerX,
                pointerY
            );
        }
    }

    function handlePointerMove(event)
    {
        if (event.pointerType === 'touch')
        {
            return;
        }

        if (!activeElement)
        {
            return;
        }
    }

    function handlePointerOut(event)
    {
        if (!activeElement ||
            event.pointerType === 'touch')
        {
            return;
        }

        var element = event.target.closest(
            '[title], .caforum-custom-tooltip-active'
        );

        if (element !== activeElement)
        {
            return;
        }

        if (event.relatedTarget &&
            activeElement.contains(event.relatedTarget))
        {
            return;
        }

        delayedHide();
    }

    function handleFocusIn(event)
    {
        var element = getTarget(event.target);

        if (element)
        {
            showTooltip(element);
        }
    }

    function handleFocusOut(event)
    {
        if (activeElement === event.target)
        {
            delayedHide();
        }
    }

    function handleTouchStart(event)
    {
        var element = getTarget(event.target);

        if (!element)
        {
            hideTooltip();
            return;
        }

        if (activeElement === element)
        {
            hideTooltip();
            return;
        }

        showTooltip(element);

        clearTimeout(showTimer);

        var customTooltip = createTooltip();

        updateTooltipColors(element);

        customTooltip.textContent =
            element.getAttribute('title') ||
            activeTitle;

        customTooltip.setAttribute(
            'aria-hidden',
            'false'
        );

        customTooltip.classList.add(
            'caforum-tooltip-visible'
        );

        positionTooltip(element);

        clearTimeout(hideTimer);

        hideTimer = window.setTimeout(
            hideTooltip,
            4000
        );
    }

    function updatePosition()
    {
        if (activeElement &&
            tooltip &&
            tooltip.classList.contains(
                'caforum-tooltip-visible'
            ))
        {
            if (typeof pointerX === 'number' &&
                typeof pointerY === 'number')
            {
                positionTooltip(
                    activeElement,
                    pointerX,
                    pointerY
                );
            }
            else
            {
                positionTooltip(
                    activeElement
                );
            }
        }
    }

    function init()
    {
        document.addEventListener(
            'pointerover',
            handlePointerOver
        );

        document.addEventListener(
            'pointermove',
            handlePointerMove
        );

        document.addEventListener(
            'pointerout',
            handlePointerOut
        );

        document.addEventListener(
            'focusin',
            handleFocusIn
        );

        document.addEventListener(
            'focusout',
            handleFocusOut
        );

        document.addEventListener(
            'touchstart',
            handleTouchStart,
            { passive: true }
        );

        window.addEventListener(
            'scroll',
            updatePosition,
            true
        );

        window.addEventListener(
            'resize',
            updatePosition
        );

        window.addEventListener(
            'beforeunload',
            restoreTitle
        );
    }

    if (document.readyState === 'loading')
    {
        document.addEventListener(
            'DOMContentLoaded',
            init
        );
    }
    else
    {
        init();
    }
}());