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

I just answered the same question

您必须创建自己的工具提示。你不需要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 Hide/Show with Slide on Hover... better way to do this?

标题弹出自动无延迟

3 个答案: