Всплывающие подсказки на элементах с title атрибутом по типу bootstrap

Предположим, что мы не хотим устанавливать bootstrap ради одного лишь компонента подсказок, ибо привитая жадность к любым ресурсам, когда устройства были слабыми, а интернет со скоростью 5 кб в секунду, сделали с нашей психикой непоправимое на всю жизнь. Хотя… я и до сих пор считаю, что ни одной не используемой функции, ни одной строки любого кода, не должно быть лишней и все эти «комбайны», «движки» и библиотеки — от лукавого. Либо, у нас есть сайт, где мы хотим реализовать не стандартные и красивые всплывающие подсказки, подогнав их css под свой дизайн, а стандартные подсказки из атрибута title нас не устраивают, тем более, что появляются они не сразу при наведении на элемент. Тогда подгружаем  на странице такой код и радуемся:

HTMLElement.prototype.tooltip = function () {
    this.onmouseover = function (e) {
        document.querySelectorAll(".tooltip").forEach(element => {
            element.parentNode.removeChild(element);
        });
        if (e.target.hasAttribute("data-title")) {
            e.target.setAttribute("title", e.target.getAttribute("data-title"));
            e.target.removeAttribute("data-title");
        }
        if (e.target.hasAttribute("title")) {
            var s = document.createElement("span");
            s.innerHTML = e.target.getAttribute("title");
            s.setAttribute("class", "tooltip");
            s.style.cssText = "position:absolute;background:rgb(0, 0, 0, 0.7);border-radius:3px;font-size:9px;padding:4px;top:" + (e.pageY - 20) + "px;z-index:1;transition: all 600ms ease-out;z-index:9999999999999;color:#fff;white-space: nowrap;display:inline-block;max-width:400px;overflow:hidden;";
            document.body.appendChild(s);
            var x = (document.body.clientWidth / 2) > e.pageX ? (e.pageX + 15) : (e.pageX - s.clientWidth - 15);
            s.style.left = x + "px";
            e.target.setAttribute("data-title", s.innerHTML);
            e.target.removeAttribute("title");
        }
    }
    this.onmousemove = this.onmouseover;
}
document.body.tooltip();