文库解析工具_使用Wenk在Pure CSS中创建缩小的工具提示

最新推荐文章于 2024-09-14 08:09:14 发布

cune1359

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量165

点赞数

文章标签： css java github python html

有了这样一个奇怪的名字，您不会对免费的CSS工具提示库 Wenk寄予厚望。但是，它是gzip压缩后可以在1KB以下测量的最小库之一 。

Wenk使用具有data-*属性的纯CSS来创建实时工具提示 ，您可以根据自己的喜好重新设置样式和位置。最棒的是，它是一个完全免费的库，其源代码可在GitHub上获得。

这些轻巧的工具提示非常容易添加到您的网站。您只需Wenk.css文件添加到页面标题中 ，就可以从GitHub存储库中下载该文件。

或者，你甚至可以添加CDN文件这是在GitHub上的CDN主持。这是代码：

<link rel="stylesheet"
href="https://cdn.rawgit.com/tiaanduplessis/wenk/master/dist/wenk.css">

或者，如果您是npm / bower风扇，则可以从终端安装此软件包。

默认的工具提示标签没有太多自定义数据。它们允许您选择位置和宽度 ，但是如果您希望它们的样式不同，则必须手动更改CSS 。

例如，您可能希望将CSS箭头添加到出现在tooltip元素上方的工具提示中。创建起来非常简单，但是您需要搜索Wenk样式表以找到要扩展的确切CSS类 。

这是Wenk工具提示的一些默认代码示例：

<!-- example of Wenk tooltip appearing on the right -->
<span data-wenk="I'm to the right!" data-wenk-pos="right">
  Wenk to the right!
</span>

Wenk的主要登录页面包括实时演示 ，您可以通过悬停进行测试。这些是您将获得的最基本的工具提示 ，但它们对于重量不到一千字节的库是完美的。

要考虑的一件事是浏览器支持 。所有版本的Chrome和Firefox 都可以正常运行 。与Opera 12+和Opera Mini v8 +相同。但是IE8和IE10似乎无法呈现这些工具提示。幸运的是，它们的市场份额正在Swift下降，但这是使用前需要考虑的问题。

这么少的KB容量，我仍然感到惊讶。 Wenk库证明了现代前端开发的成功，它表明一点点可以走很长的路。

您可以在GitHub上浏览整个源代码 ，以及实时演示和代码段 ，以为您自己的站点设置和创建这些工具提示。

翻译自: https://www.hongkiat.com/blog/pure-css-lightweight-tooltip-wenk/

关注