简单的Javascript工具提示 [英] Plain Javascript Tooltip

问题描述

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

Hi i am trying to make tooltip in plain JS which show on hover. Like the one in stackoverflow on hover over the profile name a div is shown.

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

I tried using onmouseover , onmouseout and added setTimeout to give the user a few seconds to move mouse over the tooltip content. But it was not working as i thought.

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

I really like pure js more than using any libraries. Can some one help me out?

这就是我在PURE JS中所做的事情

This is what i did in 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="";
    }

推荐答案

没有JavaScript的解决方案

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

Solution with no JavaScript

This uses CSS pseudo hover to set the display of the hidden element. The display none needs to be in the style and not on the element so it can be overwritten in the hover.

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

关注 - Up：

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

If you need to support really old browsers, you would need to add a class to the outside element when the mouse enters the div. And remove that class when mouse leaves.

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

Your code did not work because what is tp? Is a collection of elements and you are treating it as one. What you would need to do is pass in the reference to the element

HTML：

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

** JavaScript：

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

这篇关于简单的Javascript工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！