当鼠标悬停在项目上时如何添加工具提示？
[英]How can I add a tooltip when mouse is over an item?
问题描述
I want wen I click on first paragraph, the element with id « envoie » shows up as a tooltip and disappear when mouse leave.
我想当我点击第一段时，带有 id « envoie » 的元素显示为工具提示，并在鼠标离开时消失。
What I have is the tooltip is display une the first element.我所拥有的是工具提示是第一个元素的显示。 I mean when I click on the last « first element », the tooltip is still under the first element.我的意思是当我点击最后一个“第一个元素”时，工具提示仍然在第一个元素下面。
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
opacity: 1;
z-index: 2000;
visibility: visible;
.transition(all 0.1s linear);
}
</style>
<script>
window.addEventListener("load", () => {
var x = document.querySelectorAll("#envoie");
console.log(x.length);
});
</script>
</head>
<body>
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<hr />
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<div>
<p class="#example" style="margin-top:50px">Bottom</p>
</div>
</body>
</html> ```
3 个解决方案
解决方案1
0 2021-10-03 09:45:40
var myDiv = document.getElementById('foo');
myDiv.onmouseenter = function() {
// do your stuff to show element like display:block;
alert('entered');
}
myDiv.onmouseout = function() {
// do your stuff to hide element like display:none;
alert('left');
}
解决方案2
0 2021-10-03 09:52:19
You can use the title tag as a tooltip to the HTML element.您可以使用标题标签作为 HTML 元素的工具提示。
解决方案3
0 2021-10-03 11:15:55
You do not need any script to make that happened.你不需要任何脚本来实现它。 Also, from your issue title I can tell that you want the tooltip be displayed on hover (not on click) and disappeared when the mouse is away (this is how actually tooltips work).此外，从您的问题标题我可以看出您希望工具提示显示在 hover 上（而不是单击时）并在鼠标离开时消失（这就是工具提示的实际工作方式）。 So, here is the code for you:因此，这是适合您的代码：
<:DOCTYPE html> <html> <head> <style> body { /*optional: these are to make the content centered*/ height; 100vh: display; flex: flex-direction; column: justify-content; center: align-items; center: } div { /*optional*/ border; solid 1px #f9cd23: padding; 30px: } p { padding; 0: cursor; pointer: position; relative: margin; 40px 0: } /*for the tooltip box*/ p:hover:after { position; absolute: bottom; 30px: left; 50%: transform; translateX(-50%): background; #f9cd23: border-radius; 8px: color; black: content; attr(title): text-align; center: font-size; 16px: padding; 8px: width; 200px: } /*for the tooltip triangle*/ p:hover:before { left; 50%: transform; translateX(-50%): top; -20px: position; absolute: border; solid: border-color; #f9cd23 transparent: border-width; 15px 15px 0 15px: content; ''. } </style> </head> <body> <div> <p title="This is the first paragraph tooltip...">First Paragraph</p> <p title="This is the second paragraph tooltip...">Second Paragraph</p> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.