31

我正在尝试用纯 JavaScript 制作工具提示，显示在hover. 就像 Stack Overflow 中的一样，将鼠标悬停在配置文件名称上时div会显示一个。

我尝试使用onmouseover,onmouseout并添加setTimeout给用户几秒钟的时间将鼠标移到工具提示内容上。但它并没有像我想象的那样工作。

比起使用任何库，我真的更喜欢纯 JavaScript。有人可以帮我吗？

这就是我在纯 JavaScript 中所做的。

HTML

<div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME
        <div class = "tooltip">
            PROFILE DETAILS
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 2
        <div class = "tooltip" >
            PROFILE DETAILS 2
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 3
        <div class = "tooltip" >
            PROFILE DETAILS 3
        </div>
    </div>

CSS

.name{
        float:left;
        margin:100px;
        border:1px solid black;
    }
    .tooltip{
        position:absolute;
        margin:5px;
        width:200px;
        height:100px;
        border:1px solid black;
        display:none;
    }

JavaScript

var name = document.getElementsByclassName("name");
    var tp = document.getElementsByclassName("tooltip");

    function show(){
        tp.style.display="block";
    }
    function hide(){
        tp.style.display="";
    }
4

7 回答 7

42

没有 JavaScript 的解决方案

这使用 CSS 伪悬停来设置隐藏元素的显示。显示 none 需要在样式中而不是在元素上，因此可以在悬停时覆盖它。

.couponcode:hover .coupontooltip {
  /* NEW */
  display: block;
}

.coupontooltip {
  display: none;
  /* NEW */
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 100px;
}

.couponcode {
  margin: 100px;
}
<div class="couponcode">First Link
  <span class="coupontooltip">Content 1</span>
  <!-- UPDATED -->
</div>

<div class="couponcode">Second Link
  <span class="coupontooltip"> Content 2</span>
  <!-- UPDATED -->
</div>

外部链接

跟进：

如果您需要支持非常旧的浏览器，则需要在鼠标进入 div 时向外部元素添加一个类。并在鼠标离开时删除该类。

编辑

您的代码不起作用，因为 tp 是什么？是元素的集合，您将其视为一个。您需要做的是传递对元素的引用

HTML：

<div class = "name" onmouseover="show(this)" onmouseout="hide(this)">  <!-- added "this" 2 times -->

**JavaScript：

//var name = document.getElementsByclassName("name");  /* not needed */
//    var tp = document.getElementsByclassName("tooltip"); /* not needed */


function show (elem) {  /* added argument */
    elem.style.display="block"; /* changed variable to argument */
}
function hide (elem) { /* added argument */
    elem.style.display="";  /* changed variable to argument */
}
于 2013-08-21T14:08:18.237 回答
6

对于非自定义的 tooltip，你可以在 main 的 title 属性中添加你想要在 tooltip 中显示的消息div。像这样：

<div class = "name" onmouseover="show()" onmouseout="hide()" title="PROFILE DETAILS">

那么就不需要添加onmouseover和onmouseout事件处理程序了。

于 2015-10-14T14:22:07.637 回答
5

修复原始代码

我正在寻找类似的东西，我遇到了这个页面。它帮助了我，但我必须修复你的代码，它才能工作。我认为这就是你所尝试的。您必须通过对象的“ID”引用您的对象。这是我所做的，它有效：

function show(elem) {
  elem.style.display = "block";
}

function hide(elem) {
  elem.style.display = "";
}
.name {
  float: left;
  margin: 100px;
  border: 1px solid black;
}

.tooltip {
  position: absolute;
  margin: 5px;
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: none;
}
<div class="name" onmouseover="show(tooltip1)" onmouseout="hide(tooltip1)">
  NAME
  <div class="tooltip" id="tooltip1">
    PROFILE DETAILS
  </div>
</div>

<div class="name" onmouseover="show(tooltip2)" onmouseout="hide(tooltip2)">
  NAME 2
  <div class="tooltip" id="tooltip2">
    PROFILE DETAILS 2
  </div>
</div>

<div class="name" onmouseover="show(tooltip3)" onmouseout="hide(tooltip3)">
  NAME 3
  <div class="tooltip" id="tooltip3">
    PROFILE DETAILS 3
  </div>
</div>

外部链接

于 2014-01-20T08:21:37.463 回答
5

问题说：

纯 JavaScript 工具提示

但我认为在现代我们可以使用 vanilla JS 和 CSS。特别是，当我们想要提供好看的款式时，这是必须的。

这个例子是纯 JS 和 CSS 的简单实现。

让我们使用创建工具提示CSS并使用添加修改行为JS。对于这个例子，我们将定义一个tip属性来存储工具提示上显示的文本。

visibility: hidden;并且opacity: 0;会保持.tooltip隐藏和会出现的时候[tip]:hover。此外，我们可以重新定位工具提示中的发射点，使用style.transform.

Array.from(document.querySelectorAll('[tip]')).forEach(el => {
  let tip = document.createElement('div');
  tip.classList.add('tooltip');
  tip.innerText = el.getAttribute('tip');
  tip.style.transform =
    'translate(' +
      (el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px') + ', ' +
      (el.hasAttribute('tip-top') ? '-100%' : '0') +
    ')';
  el.appendChild(tip);
  el.onmousemove = e => {
    tip.style.left = e.clientX + 'px'
    tip.style.top = e.clientY + 'px';
  };
});
[tip] .tooltip {
  position: fixed;
  font-size: 16px;
  line-height: 20px;
  padding: 5px;
  background: white;
  border: 1px solid #ccc;
  visibility: hidden;
  opacity: 0;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s, visibility 0s;
}

[tip]:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

button {
  display: block;
  cursor: pointer;
  padding: 8px 15px;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 50px;
  font-size: 18px;
  background: white;
}

button:hover {
  border-color: dodgerblue;
}
<button tip="Click Me!">
  I have a tooltip
</button>
<button tip="Click Me Aswell!" tip-top tip-left>
  Top-left tooltip
</button>

于 2021-09-27T01:38:25.780 回答
3

即使对于 $(document).ready，在纯 JS 中也很难完成——参见这里： $(document).ready 等价于没有 jQuery

所以我使用一个简单的版本：

window.addEventListener("load", function () {
    var couponcodes = document.getElementsByClassName("couponcode");
    for (var i = 0; i < couponcodes.length; i++) {
        couponcodes[i].addEventListener("mouseover", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.removeAttribute("style");
        });
        couponcodes[i].addEventListener("mouseout", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.style.display = "none";
        });
    }
});

http://jsfiddle.net/mynetx/5qbP3/

于 2013-08-21T13:57:36.913 回答
1

popper+tippy 遇到了一些滞后，开始搜索替代品并在上面找到@Teocci 的好答案！

我需要进行以下调整，因此这是修改后的代码：

  • 由于 css/innerHTML 冲突，向 body 添加提示，而不是 el
  • 使用js mouseevents切换，防止嵌套触发器
  • 总是底部用例的箭头
  • 能够清除所有以前使用 DOM 更改进行动态调用的提示

CSS

.tooltip {
    position: fixed;
    z-index: 99;
    font-size: 12px;
    line-height: 12px;
    padding: 5px;
    background: #222;
    color: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    font-family: sans-serif;
    box-sizing: border-box;
    /*box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.2);*/
    transition: opacity 0.3s, visibility 0s;
    visibility: hidden;
    opacity: 0;
}

.tooltip-arrow{
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    background: inherit;
    transform: rotate(45deg);
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

/* just for demo */
.box{
    margin: 25px;
    padding: 25px;
}

HTML

<div class="box" style="background:orange;" data-tip="hello i'm the parent">
    <div class="box" style="background:green;" data-tip="hi i'm the child"></div>
</div>

JS

function initTips(){
    // purge previous for dynamic render
    Array.from(document.querySelectorAll('.tooltip')).forEach(el => {
        el.remove()
    })

    // built upon: https://stackoverflow.com/a/69340293/10885535
    Array.from(document.querySelectorAll('[data-tip]')).forEach(el => {
        // tip
        let tip = document.createElement('div')
        tip.classList.add('tooltip')
        tip.innerText = el.getAttribute('data-tip')
        document.body.appendChild(tip)

        // arrow
        let arrow = document.createElement('div')
        arrow.classList.add('tooltip-arrow')
        tip.appendChild(arrow)

        // position tip + arrow once added
        setTimeout(() => {
            let elmPos = el.getBoundingClientRect()
            let tipPos = tip.getBoundingClientRect()
            tip.style.left = (elmPos.left + (elmPos.width - tipPos.width)/2) + 'px'
            tip.style.top = (elmPos.bottom + 5)+'px'
            arrow.style.left = (tipPos.width/2 - 5) + 'px'
        }, 0)

        // toggle with mouse
        el.onmouseover = e => {
            tip.style.opacity = 1
            tip.style.visibility = 'visible'
            e.stopPropagation() // stop parent
        };
         el.onmouseout = e => {
            tip.style.opacity = 0
            tip.style.visibility = 'hidden'
        };
    });
}

// kickoff
initTips()

// test calling again ie after dynamic content
setTimeout(initTips, 1000)
于 2022-01-16T01:46:09.697 回答
-1 

document.addEventListener("mousemove",function awesome(e){
if(e.target.id != ""){
e.target.title = "#"+e.target.id;
}
}); 
<div id="dkf">random stuff</div>
<div id="dkls">some more random stuff</div>

你可以用很多其他的东西来做，比如className、tagName等等......

于 2019-10-24T00:01:04.140 回答