纯 JavaScript 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18359193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Plain JavaScript tooltip
提问by Kishore
I am trying to make a tooltip in plain JavaScript which is shown on hover. Like the one in Stack Overflow on hover over the profile name a divis shown.
我正在尝试用纯 JavaScript 制作工具提示，该工具提示显示在hover. 就像 Stack Overflow 中的一样，将鼠标悬停在配置文件名称 adiv上。
I tried using onmouseover, onmouseoutand added setTimeoutto give the user a few seconds to move mouse over the tooltip content. But it was not working as I thought.
我尝试使用onmouseover,onmouseout并添加setTimeout给用户几秒钟时间将鼠标移到工具提示内容上。但它并没有像我想象的那样工作。
I really like pure JavaScript more than using any libraries. Can some one help me out?
与使用任何库相比，我真的更喜欢纯 JavaScript。有人可以帮我吗？
This is what I did in pure JavaScript.
这就是我在纯 JavaScript 中所做的。
HTML
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
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
JavaScript
var name = document.getElementsByclassName("name");
var tp = document.getElementsByclassName("tooltip");
function show(){
tp.style.display="block";
}
function hide(){
tp.style.display="";
}
回答by epascarello
Solution with no JavaScript
没有 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.
这使用 CSS 伪悬停来设置隐藏元素的显示。显示 none 需要在样式中而不是在元素上，因此它可以在悬停时被覆盖。
HTML:
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:
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;
}
Example:
例子：
Follow-Up:
跟进：
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.
如果您需要支持非常旧的浏览器，则需要在鼠标进入 div 时向外部元素添加一个类。并在鼠标离开时删除该类。
EDIT
编辑
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
您的代码不起作用，因为什么是 tp？是元素的集合，您将其视为一个。您需要做的是传递对元素的引用
HTML:
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 */
}
回答by Dede
Fix for the original code
修复原始代码
I was looking for something like this, and i came across this page. It helpd me, but i had to fix your code, for it to work. I think that this is what you tried. You have to refference your objects by their "ID". Here is what I've done, and it works:
我正在寻找这样的东西，我遇到了这个页面。它帮助了我，但我必须修复您的代码，才能使其正常工作。我认为这就是你尝试过的。您必须通过它们的“ID”来引用您的对象。这是我所做的，并且有效：
HTML
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
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
JS
function show (elem) {
elem.style.display="block";
}
function hide (elem) {
elem.style.display="";
}
回答by user5445555
For non-customized tooltip, you can just add the message you want to display in tooltip in the title attribute of the main div. Just like this:
对于非自定义工具提示，您可以在 main 的 title 属性中添加要在工具提示中显示的消息div。像这样：
<div class = "name" onmouseover="show()" onmouseout="hide()" title="PROFILE DETAILS">
Then there is no need to add the onmouseoverand onmouseoutevent handlers.
那么就不需要添加onmouseover和onmouseout事件处理程序。
回答by mynetx
Even for $(document).ready, it's hard to accomplish in pure JS—see here: $(document).ready equivalent without jQuery
即使对于 $(document).ready，在纯 JS 中也很难完成——参见这里： $(document).ready 等效，没有 jQuery
So I'm using a simple version:
所以我使用的是一个简单的版本：
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";
});
}
});
回答by twarped
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>and you can do it with lots of other stuff, like className, tagName,etc...
你可以用很多其他的东西来做到这一点，比如 className、tagName 等......
