javascript 标题自动弹出，没有延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7928143/
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
title popups automatically without delay
提问by Y2ok
is there any chance to do a js onclick function, that if someone will click on that icon automatically the title text will be shown, or just when someone moves mouse over it, title will be shown without any delay? Right now title for element comes out after 1 sec.
有没有机会做一个 js onclick 功能，如果有人会自动点击那个图标，标题文本将被显示，或者当有人将鼠标移到它上面时，标题将立即显示？现在元素的标题在 1 秒后出现。
采纳答案by Richard Ev
You won't be able to override the default browser behaviour of how it displays tooltips containing the titleattribute text, but you could follow the steps on this other question to show and hide a divcontaining the relevant text (the approach uses jQuery and deals with hover, but adding a clickhandler isn't much of a stretch).
您将无法覆盖它如何显示包含title属性文本的工具提示的默认浏览器行为，但您可以按照这个其他问题上的步骤来显示和隐藏div包含相关文本的一个（该方法使用 jQuery 并处理悬停，但添加click处理程序并不是一件容易的事）。
jQuery Hide/Show with Slide on Hover... better way to do this?
回答by Marian Bazalik
you can try this, pure css, without js:
你可以试试这个，纯 css，没有 js：
HTML:
HTML：
<div class="hover">
Hover Me
<div class="tooltip">
Tooltip goes here
</div>
</div>?
CSS:
CSS：
.hover{
border:1px solid black;
text-align:center;
width:150px;
position:relative;
}
.tooltip{
display:none;
position:absolute;
border:1px solid red;
border-radius: 5px;
padding:5px;
top:-10px;
left:200px;
width: 300px;
}
.hover:hover .tooltip{
display:block;
}?
回答by gilly3
I justanswered the same question
You'll have to create your own tooltip. You don't need JavaScript, pure CSS is enough:
您必须创建自己的工具提示。你不需要 JavaScript，纯 CSS 就足够了：
.tooltip {
display: none;
position: absolute;
background: #ffe;
border: 1px solid #eed;
border-radius: 4px;
padding: 2px 4px;
}
:hover + .tooltip {
display: block;
}
body { font-family: sans-serif; }<div>Hover for tooltip</div>
<span class="tooltip">Tooltip text goes here</span>