Microtip –具有本机可访问性功能CSS Tooltip库

您可以在GitHub上进行快速搜索，以找到数十个自定义工具提示库 。 似乎每个月都会有新的出现在网络上。

如果您从未考虑过可访问性，那么Microtip可能会改变您的想法。 它将干净的设计与适用于所有设备，所有浏览器以及严重受损用户的功能完美融合。

在主页上 ，您可以找到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上给创建者下一行 。

翻译自: https://www.hongkiat.com/blog/microtip-css-tooltips/