使用纯 Javascript 的自定义工具提示的基本思想

我需要使用 pure 创建自定义工具提示的基本想法Javascript code;

我想要的是 ：

例如 ：

<a href="#" onmousemover="tooltip('text')">Link Text</a>

And onmouseover我想显示自定义工具提示fixed position基于<a>的元素position, 开始于right:0或来自left:0 of the <a>元素;

HTML

<a href="https://www.google.com" tooltip="Go to Google">Google</a>

JavaScript

(function () {

var a = document.getElementsByTagName('*'),
    tip, text,
    base = document.createElement('tooltip'); //Defining all objects

for (var x=0;x < a.length;x++) { //I'm using "for" loop to get all "a" elements with attribute "tooltip".
     a[x].onmouseover = function () {
         text = this.getAttribute('tooltip');
         tip = document.createTextNode(text);
         if (text != null) {// Checking if tooltip is empty or not.
               base.innerHTML = '';
               base.appendChild(tip);
               if (document.getElementsByTagName('tooltip')[0]){// Checking for any "tooltip" element
                   document.getElementsByTagName('tooltip')[0].remove();// Removing old tooltip
               }
               base.style.top = (event.pageY + 20) + 'px';
               base.style.left = (event.pageX + 20) + 'px';
               document.body.appendChild(base);
         }

     };
     a[x].onmouseout = function () {
         document.getElementsByTagName('tooltip')[0].remove();// Remove last tooltip
     };
}

})();

通过将此脚本包含到您的页面中，您只需使用tooltip="Text"在任何 HTML 元素中

CSS

tooltip {
    position: fixed;
    background: #fff;
    color: #333;
    border: 2px solid #333;
    font-size: 15px;
}

您可以根据需要编辑CSS！

这是我的JSFiddle