您可以在GitHub上进行快速搜索,以找到数十个自定义工具提示库 。 似乎每个月都会有新的出现在网络上。
如果您从未考虑过可访问性,那么Microtip可能会改变您的想法。 它将干净的设计与适用于所有设备,所有浏览器以及严重受损用户的功能完美融合。
![microtip的动画示例](https://i-blog.csdnimg.cn/blog_migrate/c720fb83e9af16500141fd439e3bf839.gif)
在主页上 ,您可以找到Microtip库的下载链接以及大量的代码演示。
您可以通过程序包管理器,直接下载或直接从CDN中提取它来获得此设置。 它带有一个CSS文件 ,基本上就是您所需要的。
将Microtip添加到页面后,即可开始在页面元素上添加工具提示。 这些完全符合WAI,因此它们完全符合现代可访问性标准。
这是附加到具有自定义位置的按钮元素上的示例工具提示代码:
<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">
没有太多代码对吗?
该库是超轻量级的,总共压缩了1KB。 考虑到您从这些工具提示中获得了多少,这真是太疯狂了。
可以通过HTML属性传递自定义CSS属性,以定义字体大小,过渡样式,缓动以及许多其他设置。
您也可以直接覆盖CSS,以使用不同的颜色或字体来放大工具提示 。
请查看主页上的自定义部分以了解更多详细信息。 一切都通过HTML和CSS运行,因此您不需要任何脚本知识即可开始工作。
Microtip非常易于设置和自定义,因此,如果您至少了解基本的前端编码 ,就可以了。
但是,请查看GitHub存储库以获取更多设置信息并获取样式表的副本。
如果您对新功能有疑问或建议,也可以在Twitter @_ighosh上给创建者下一行 。