简单的Javascript工具提示

Question

嗨,我正在尝试在简单的JS中制作工具提示,在悬停时显示.就像stackoverflow中悬停在配置文件名称上的那个一样,显示了一个div.

我尝试使用hover,div并添加onmouseover为用户几秒钟将鼠标移到工具提示内容上.但它并没有按照我的想法运作.

我真的很喜欢纯粹的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)">  <!-- 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 */
}

Answer 2

问题说：

纯 JavaScript 工具提示

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

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

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

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

const elements = [...document.querySelectorAll('[tip]')]

for (const el of elements) {
  const tip = document.createElement('div')
  tip.classList.add('tooltip')
  tip.textContent = el.getAttribute('tip')
  const x = el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '16px'
  const y = el.hasAttribute('tip-top') ? '-100%' : '0'
  tip.style.transform = `translate(${x}, ${y})`
  el.appendChild(tip)
  el.onpointermove = e => {
    if (e.target !== e.currentTarget) return

    const rect = tip.getBoundingClientRect()
    const rectWidth = rect.width + 16
    const vWidth = window.innerWidth - rectWidth
    const rectX = el.hasAttribute('tip-left') ? e.clientX - rectWidth : e.clientX + rectWidth
    const minX = el.hasAttribute('tip-left') ? 0 : rectX
    const maxX = el.hasAttribute('tip-left') ? vWidth : window.innerWidth
    const x = rectX < minX ? rectWidth : rectX > maxX ? vWidth : e.clientX
    tip.style.left = `${x}px`
    tip.style.top = `${e.clientY}px`
  }
}

[tip] .tooltip {
  position: fixed;
  font-size: 16px;
  line-height: 20px;
  padding: 5px;
  background: #444;
  border: 1px solid #222;
  visibility: hidden;
  opacity: 0;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s, visibility 0s;
  color: white;
  min-width: 120px;
}

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

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

button:hover {
  border-color: dodgerblue;
}

<button tip="Click me here!">I have a tooltip</button>
<button tip="Click me aswell!" tip-top tip-left>Top-left tooltip</button>

Answer 3

修复原始代码

我正在寻找这样的东西，我遇到了这个页面。它帮助了我，但我必须修复您的代码，才能使其正常工作。我认为这就是你尝试过的。您必须通过它们的“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 4

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

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

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

Answer 5

即使对于 $(document).ready，\xe2\x80\x99 也很难在纯 JS 中完成\xe2\x80\x94参见这里：\n $(document).ready 相当于没有 jQuery

\n\n

所以我\xe2\x80\x99m使用一个简单的版本：

\n\n\n\n

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

\n\n

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

\n