Userscript does not work on all webpages

Question

The following script works on most static websites and hyperlinks, but it currently has an issue rendering tooltips for wikis and other dynamically generated content.

I have even used a timeout to wait for all the content to load before calling tooltipster(), but this still did not render the tooltips.

setTimeout(function() {
    $('a.tooltipster').tooltipster({
        theme: 'tooltipster-punk'
    });
}, 5000);

It works fine on sites like jQuery and MDN, but not on Wikipedia and Reddit.

Userscript

// ==UserScript==
// @name         Link Hover
// @namespace    default
// @version      1.0.0
// @description  Display link.
// @author       Mr. Polywhirl
// @match        *://*/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js
// @resource     tt_CSS https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css
// @resource     ttTheme_CSS https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-punk.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_log
// ==/UserScript==
(function() {
    'use strict';
    GM_addStyle([
        GM_getResourceText('tt_CSS'),
        GM_getResourceText('ttTheme_CSS')
    ].join(''));

    (function($) {
        $.fn.setLinkTitle = function() {
            return this.attr('title', processLink(this.attr('href')));
        };
    })(jQuery);

    $(function() {
        $('a').each((index, link) => {
            $(link).addClass('tooltipster').setLinkTitle();
        }).tooltipster({
            theme: 'tooltipster-punk'
        });
    });

    function processLink(path) {
        return !isPathAbsolute(path) ? relPathToAbs(path) : path;
    }

    // http://stackoverflow.com/a/25833886/1762224
    function relPathToAbs(sRelPath) {
        var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
        for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
            nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
            sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
        }
        return location.protocol + '//' + location.host + sDir + sPath.substr(nStart);
    }

    function isPathAbsolute(path) {
        return /^(?:\/|[a-z]+:\/\/)/.test(path);
    }
})();

Answer 1

Going by the suggestion of wOxxOm, I used the URL API and used the raw HTML element properties.

I also added a way to highlight the protocol and hostname.

// ==UserScript==
// @name         Link Hover
// @namespace    http://tampermonkey.net/
// @version      1.2.1
// @description  Display link.
// @author       Mr. Polywhirl
// @match        *://*/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js
// @resource     tt_CSS https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_log
// ==/UserScript==
(function() {
    'use strict';
    GM_addStyle([
        GM_getResourceText('tt_CSS'),
        // Derived from the tooltipster-punk theme.
        '.tooltipster-green {',
        '  border-radius: 5px; ',
        '  border-bottom: 3px solid #7EB;',
        '  background: #2a2a2a;',
        '  color: #DFE;',
        '}',
        '.tooltipster-green .tooltipster-content {',
        '  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;',
        '  font-size: 14px;',
        '  line-height: 16px;',
        '  padding: 8px 10px;',
        '}',
         'span[class^="tt-protocol-"] {',
        '  color : #F44;',
        '}',
        '.tt-protocol-https {',
        '  color : #0F0 !important;',
        '}',
        '.tt-hostname {',
        '  color : #FF0;',
        '}'
    ].join(''));

    const tooltipConfig = {
        theme: 'tooltipster-green',
        contentAsHTML : true,
        multiple : true
    };

    (function($) {
        $.fn.setLinkTitle = function() {
            this[0].title = $.processLink(this[0].href);
        };
        $.processLink = function(url) {
            try {
                var urlObj = new URL(url); // Parse URL as an object.
                return url.replace(urlObj.protocol, function(protocol) {
                    return $('<span>').addClass('tt-protocol-' + protocol.replace(':', '')).text(protocol).prop('outerHTML');
                }).replace(urlObj.hostname, function(hostname) {
                    return $('<span>').addClass('tt-hostname').text(hostname).prop('outerHTML');
                });
            }
            catch (e) {
                return url;
            }
        };
    })(jQuery);

    $(function() {
        createTooltips();

        if ('MutationObserver' in window) {
            document.addEventListener('DOMNodeInserted', createTooltips, false);
        } else {
            setInterval(createTooltips, 100);
        }
    });

    function createTooltips() {
        $('a:not(.tooltipstered)').each((index, link) => {
            $(link).addClass('tooltipster').setLinkTitle();
        }).tooltipster(tooltipConfig);
    }
})();