工具提示是一种无需占用额外空间即可在网站上显示其他信息的好方法。 工具提示通常出现在鼠标悬停时 ,并且可能有数百个jQuery插件在您的网站上包含漂亮的工具提示。
但是,使用jQuery插件的一些常见弊端是,它带有一组无用的选项,并且由于代码缓慢而使网站性能下降 。
因此,今天,我们将介绍创建工具提示的替代方法。 有了CSS3中的许多新功能,现在仅使用CSS即可创建类似的精美工具提示。 让我们开始吧。
使用Hint.css
在本文中,我们不会从头开始构建它。 我们将使用Hint.css 。 Hint.css是类和样式规则的集合,使我们可以更快地创建简单的工具提示。 要使用,只需将样式表添加到HTML文档中,或将所有样式规则复制到您自己的样式表中。
<link rel="stylesheet" href="hint.css">
现在,在您的文档文本中,将要插入工具提示的片段与内联元素一起使用,例如使用span或anchor元素。 并使用data-hint
属性添加工具提示内容。
However, because the freelance <span data-hint="The arena of commercial dealings">marketplaces</span> across the globe are filled with freelance contractors all tendering for a limited amount of jobs.
从技术上讲,这就是您所需要的。 如果您在浏览器中预览文档并将鼠标悬停,则应该会弹出工具提示。
![baisc工具提示](https://i-blog.csdnimg.cn/blog_migrate/4dbaad1fb4efb453ae042c2d69bc5d0a.png)
该工具提示与伪元素一起显示,并为动画移动使用CSS3 Transition。
给个线索
除非您使用的锚元素默认情况下具有独特的样式,否则没有迹象表明该特定单词将显示工具提示,就像您在上面的屏幕快照中看到的那样,因此,用户很可能毫无头绪。
因此,为了更好的用户体验,我们可以添加一些额外的样式来为其提供指标 ,例如:
span[data-hint] {
border-bottom: 1px dotted #aaa;
}
span[data-hint]:hover {
cursor: pointer;
}
这些样式将使具有data-hint
属性的span元素的底部带有虚线边框。 您可以调整样式以满足您的设计要求。
工具提示方向
我们可以使用提供的类在四个不同的方向上显示工具提示:顶部,底部,右侧和左侧。
<span class="hint--left" data-hint="The arena of commercial dealings">marketplaces</span>
<span class="hint--right" data-hint="The arena of commercial dealings">marketplaces</span>
<span class="hint--top" data-hint="The arena of commercial dealings">marketplaces</span>
<span class="hint--bottom" data-hint="The arena of commercial dealings">marketplaces</span>
或继续显示工具提示
<span class="hint--always" data-hint="The arena of commercial dealings">marketplaces</span>
最终思想
如今,有了CSS3中更高级的属性,我们不再仅仅依靠JavaScript或jQuery来创建精美的UI,例如创建工具提示,并使用Hint.css ,我们可以快速创建一个。 但是正如本文前面所述,此技术仅允许我们创建一个简单的基于文本的工具提示 。
如果要创建更高级的工具提示,例如,带有图像的工具提示或在单击鼠标而不是将鼠标悬停时显示工具提示,则使用JavaScript或jQuery仍然是更好的方法。