修复原始代码

Question

您好我正在尝试在悬停时显示的普通JS中制作工具提示。就像stackoverflow中悬停在配置文件名称上的那个一样，显示了一个div。

我尝试使用onmouseover，onmouseout并添加了setTimeout，以便用户在几秒钟内将鼠标移到工具提示内容上。但它并没有按照我的想法运作。

我真的很喜欢纯粹的js而不是使用任何库。有人可以帮助我吗？

这就是我在PURE JS中所做的

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

JS

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

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

Answer 1

没有JavaScript的解决方案

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

<强> HTML：

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

<强> CSS：

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

示例：

jsFiddle

<强>后续：

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

修改

您的代码无效，因为什么是tp？是元素的集合，您将它视为一个元素。你需要做的是传递对元素的引用

<强> HTML：

<div class = "name" onmouseover="show(this)" onmouseout="hide(this)"> 

** 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 */ }

Answer 2

修复原始代码

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

HTML

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

CSS

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

JS

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

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

Answer 3

即使是$（document）.ready，在纯JS中很难实现 - 请看这里： $(document).ready equivalent without 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/

Answer 4

对于非自定义工具提示，您只需在主div的title属性中添加要在工具提示中显示的消息即可。就像这样：

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

然后无需添加onmouseover和onmouseout事件处理程序。

Answer 5

<div class = "name" >
<p title="PROFILE DETAILS">name1</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 2">name2</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 3">name3</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 4">Anjan</p>..
</div>

Answer 6

如果您对简单的强大选项感兴趣，请在页面末尾添加以下几行JavaScript：

(function(){
    var stylesheet1 = document.createElement('style');
    stylesheet1.innerHTML = 'mb-tooltip {display: none;position: fixed;}[data-mb-tooltip]:hover + mb-tooltip {display: block;}';
    document.head.appendChild(stylesheet1);
    var stylesheet2 = document.createElement('style');
    document.head.appendChild(stylesheet2);
    var tooltipList = document.querySelectorAll('[data-mb-tooltip]');
    for(var i = 0; i < tooltipList.length; i++){
        var tooltipContainer = document.createElement('mb-tooltip');
        tooltipContainer.innerHTML = tooltipList[i].getAttribute('data-mb-tooltip');
        tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling);
    }
    window.addEventListener('mousemove', function(e){
        stylesheet2.innerHTML = 'mb-tooltip { top: ' + (e.clientY + 18) +'px; left: ' + e.clientX +'px}'
    });
})();

然后在将鼠标悬停在工具提示上时，为要显示工具提示的元素添加data-mb-tooltip="your text"。

然后，您可以使用CSS中的mb-tooltip设置工具提示的样式（例如.. mb-tooltip {border:solid gray 1px;}）

P.S。您还可以将HTML放入mb-tooltip attr。

Answer 7

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等...

简单的Javascript工具提示

7 个答案:

没有JavaScript的解决方案

修改

修复原始代码