logo标签列表

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

javascripttooltip
8

我需要用纯 Javascript 代码创建自定义工具提示的基本思路；

我的要求 :

例如 :

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

当触发onmouseover事件时，我想显示一个自定义工具提示，其固定位置基于<a>元素的位置，从<a>元素的右:0或左:0处开始；

8
现在为什么会有这么多人问“你尝试了什么”？对于初学者，他们该去哪里寻求帮助呢？讨厌那些话！ - Sarfraz
@DavidThomas 我遇到的唯一问题是创建工具提示的位置，我认为我做得很对，但位置并不如我所预期的那样。 - John
2
@Sarfraz：我不反对帮助那些没有尝试过的人，但是如果已经有了尝试，我宁愿从那个基础开始。虽然我承认开头的问题可能显得有些过于激进，但更重要的部分是随后的问题，尽管它们是在第一个问题的基础上建立起来的。 - David Thomas
1
@DavidThomas：那样做很有意义，我完全同意你的观点 :) - Sarfraz
我不知道你是否还在或者你是否已经找到了适合的东西，但是我上周刚刚创建了这个。它发布在http://stackoverflow.com/questions/24458970/popup-tooltip-position-in-jquerymobile作为答案。 - Frank Conijn - Support Ukraine
3个回答
8

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
     };
}

})();

通过将此脚本包含到您的页面中，您只需在任何HTML元素中使用tooltip="文本"即可。 CSS 
tooltip {
    position: fixed;
    background: #fff;
    color: #333;
    border: 2px solid #333;
    font-size: 15px;
}

您可以根据自己的意愿编辑CSS！

这是我的JSFiddle链接。

3
由于用户搜索“自定义工具提示”时会出现此问题，因此我想添加 bootstrap 的 JS 工具提示，尽管您已经提到了“纯 JavaScript”。因此，在某种意义上，这个答案只是为了给未来的读者提供另一个不错的选项。
请查看 这里 以了解如何使用 bootstrap 工具提示插件。并在 这里 了解有关在使用 Bootstrap 的 JS 工具提示时可用的选项和方法。
此外，我在这里提供了他们网站上的 tryit 示例： 

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
/* 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;
}
<!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>
</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>
</body>

</html>

3
尽管你有意回答问题，但仍未解答问题且不属于此处。 - Rob
@Rob 一方面你是对的，这不应该出现在这里。但另一方面，考虑到答案中的P.S.，我认为它 有点 应该出现在这里。再次注意 有点。 :-) - Sнаđошƒаӽ
1
你需要一个类似这样的函数：

```

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。当触发onmouseout时，您需要一个相应的hide()函数来隐藏工具提示。

这里有一个工作的JSFiddle。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接