自定义工具提示的基本理念，采用纯JavaScript(basic idea of a custom

我需要创建一个使用纯自定义工具提示的基本思想Javascript代码;

我想要的是：

例如：

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

和onmouseover我想显示与自定义工具提示fixed position基于<a>的元件position ，从开始right:0或从left:0的的<a>元件;

Answer 1:

由于这个问题来了，当用户搜索custom tooltip ，我想补充引导的JS提示，虽然你所提到的纯JavaScript。 因此，在某种意义上这个答案只有让未来的读者的另一个不错的选择与合作。

看看这里了解如何使用引导提示插件。而在这里，了解如何使用引导程序的JS工具提示时，可以在您的处置方案和方法。

不过我给tryit从这里他们的网站：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  /* Tooltip */
  .test + .tooltip > .tooltip-inner {
      background-color: #73AD21; 
      color: #FFFFFF; 
      border: 1px solid green; 
      padding: 15px;
      font-size: 20px;
  }
  /* Tooltip on top */
  .test + .tooltip.top > .tooltip-arrow {
      border-top: 5px solid green;
  }
  /* Tooltip on bottom */
  .test + .tooltip.bottom > .tooltip-arrow {
      border-bottom: 5px solid blue;
  }
  /* Tooltip on left */
  .test + .tooltip.left > .tooltip-arrow {
      border-left: 5px solid red;
  }
  /* Tooltip on right */
  .test + .tooltip.right > .tooltip-arrow {
      border-right: 5px solid black;
  }
  </style>
</head>
<body>

<div class="container">
  <h3>Tooltip CSS Example</h3>
  <ul class="list-inline">
    <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
    <li><a class="test" href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
    <li><a class="test" href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
    <li><a class="test" href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

PS：在您downvote的不是一个问题的OP这个答案，请注意，我预期这会帮上只有未来的读者，因为对于搜索custom tooltip导致这里。

Answer 2:

我对这个问题的一个好主意。

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

希望这会帮助你。

Answer 3:

你需要一个功能是这样的：

function tooltip(text, element) {

    var offsetDistance = 20;

    tt = document.getElementById('ttdiv');
    elem = document.getElementById(element.id);
    tt.style.top = elem.offsetTop + offsetDistance + 'px';
    tt.style.left = elem.offsetLeft + offsetDistance + 'px';
    tt.style.display = 'block';
    tt.innerHTML = text;
}

凡ttdiv是提示div的ID，也就是初始设置为display:none 。你需要一个伴随hide()函数隐藏工具提示时onmouseout被触发。

这里有一个工作的jsfiddle 。

文章来源: basic idea of a custom tooltip, using pure Javascript