标题弹出自动无延迟

Question

有没有机会做一个js onclick功能,如果有人会自动点击该图标,会显示标题文字,或者当有人将鼠标移到它上面时,标题会毫无延迟地显示？现在,元素的标题在1秒后出现.

Answer 1

你可以尝试这个,纯粹的CSS,没有js:

HTML:

<div class="hover">
    Hover Me
    <div class="tooltip">
        Tooltip goes here
    </div>
</div>?

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;
}?

http://jsfiddle.net/kamil335/qGTUc/

Answer 2

我刚刚回答了同样的问题

您必须创建自己的工具提示.你不需要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>

jsfiddle.net/v655C

Answer 3

您将无法覆盖默认浏览器行为，即如何显示包含title属性文本的工具提示，但您可以按照此其他问题上的步骤来显示和隐藏div包含相关文本的工具提示（该方法使用 jQuery 并处理悬停，但添加click处理程序并不困难）。

jQuery 隐藏/显示并在悬停时滑动...更好的方法吗？