Wenk to the right!
Wenk in the center!
``` Note the asymmetry between the three groups. Position and length can be given either as a data attribute or as a class, while alignment is documented as class only. That is a small inconsistency, but it is worth knowing before you write a generator that emits one style of markup for everything. ## Installing from a CDN or from npm The distribution is a plain stylesheet, so installation is either a link tag or a package manager. The README gives the CDN route with two hosts, unpkg and the rawgit mirror: ```html ``` The npm route installs the same package and lets your build pick up the file: ```sh $ npm install wenk ``` The package manifest sets both main and style to dist/wenk.css, and the files array publishes only the dist directory, so an npm consumer gets the compiled stylesheet and not the Less or SCSS sources. A Yarn install is documented in the same form: ```sh $ yarn add wenk ``` If you want the sources instead of the built file, you would pull them from the repository, where src/wenk.less and src/wenk.scss are the entry points the README links to. The demo page lives in the demo directory of the repository and is published to the project homepage at tiaanduplessis.github.io/wenk. ## The touch input failure mode is documented rather than fixed This is the part of the project that matters most for a decision, because it is an explicit limitation rather than a missing feature nobody noticed. Wenk's default stylesheet uses a CSS ::after tooltip with pointer-events: none, and there is no built-in tap-to-dismiss handler. On touch input the tooltip can stay visible after a tap, and tapping over it can activate a link or an element underneath it. There is no JavaScript remedy, because there is no JavaScript in the library. The documented approach is an optional CSS override loaded after the default stylesheet, which suppresses the tooltip entirely on devices without a convenient hover: ```css @media (hover: none), (pointer: coarse) { [data-wenk]::after { opacity: 0 !important; visibility: hidden !important; } } ``` For the arrow bearing theme variant the same rule also needs [data-wenk]::before in the selector list, so the arrow is hidden as well. Two caveats come with the override, and both are stated in the README. First, it suppresses the tooltip rather than adding tap-to-dismiss, and it does not change link behaviour. Second, the hover and pointer media features describe the primary pointing device the browser has chosen, not each individual interaction, so on a hybrid device the rule can hide tooltips while a mouse is in use or leave them enabled during touch. The README's advice is to test the input combinations your application actually supports. The accessibility consequence is stated plainly as well: essential information belongs outside the tooltip, including for touch, keyboard and assistive technology users, and hover-only content should not carry instructions or labels. ## A Gulp 4 build with a package that publishes only dist The build is an older style toolchain, and knowing that before you adopt the project saves a future surprise. The package scripts show Gulp driving everything: ```json "scripts": { "test": "node test/build.js", "build": "gulp build", "start": "gulp demo", "dev": "gulp", "size": "gulp size", "deploy": "gulp build && gh-pages -d demo", "lint": "node --check gulpfile.js && node --check test/build.js" }, ``` The devDependencies list Gulp 4, browser-sync, cssnano, del, gh-pages, gulp-postcss, gulp-header, gulp-rename, gulp-size and postcss-cssnext. The size script exists because the file size is the project's headline number: the README states that the minified version is 733 bytes when gzipped. The repository also carries a yarn.lock, and the README notes that the development tasks use Gulp 4 with a locked Yarn 1 dependency set on Node.js 18 or newer, though that sentence is cut off in the current README. The test entry point is not a unit test runner but a build script, node test/build.js, and lint is limited to a syntax check of two files. There is no browser test harness in the manifest. For a library this small that is defensible, but it does mean a change to the tooltip's rendering is verified by looking at the demo rather than by an assertion. The package version is 1.0.8 and the repository has no GitHub releases, so the npm version is the only release marker a consumer can point at. ## Where Wenk is the wrong tool The honest case against Wenk is touch and keyboard, and it was already covered: a hover-only tooltip with no dismissal handler and no ARIA wiring is a poor fit for instructions people need on a phone or with a screen reader. The documentation says as much, which is unusual and useful, but it also means the library cannot be the whole solution. The other limitation is browser coverage. The README lists the browsers that doiuse reports as missing support: IE 8 and 10, Opera 12.1, Opera Mini 5.0 to 8.0 and IE Mobile 10. Those are old targets, so the practical question is whether your own support matrix still includes them. If it does not, the note is reassuring. If your organisation is still stuck on IE 10, Wenk will not carry a tooltip there. The realistic alternative is a JavaScript tooltip library, and the README itself lists a roundup of JavaScript and CSS tooltip libraries under As Seen in. The difference in approach is behavioural rather than cosmetic. A JavaScript implementation inserts real DOM and can therefore dismiss on tap, manage focus, position itself against overflowing containers and expose ARIA attributes, at the cost of shipping and maintaining a runtime. Wenk takes the opposite trade: nothing but a stylesheet, so nothing can react to input. A third option is to keep the CSS approach and put the important text in the DOM permanently, styled to look like a tooltip, which costs a small amount of layout work but needs no pointer handling at all. ## Conclusion Wenk fits projects that want a tooltip with no JavaScript budget and static markup, especially pages where hover is a reliable pointer interaction. It does not fit interfaces that rely on touch, keyboard or assistive technology for critical instructions, because the tooltip has no dismissal handler and the documentation explicitly says not to rely on hover-only content. Before adopting it, check the media query override for coarse pointers, confirm that the 733 byte gzipped claim still matches the dist/wenk.css you publish, and keep the essential text outside the tooltip. ## FAQ ### How do I use the wenk tooltip library? Add the data-wenk attribute with the text you want to display to any element, for example . The tooltip is rendered by CSS, so no JavaScript import is needed. ### How do I install wenk? The README gives a CDN link to https://unpkg.com/wenk/dist/wenk.css and an npm install wenk, or yarn add wenk. The published package contains only the dist directory, with dist/wenk.css set as both main and style. ### Does wenk work on touch devices? Not by default. The stylesheet uses a ::after tooltip with pointer-events: none and there is no tap-to-dismiss handler, so on touch input a tooltip can remain visible after a tap. The README suggests an optional CSS override for (hover: none), (pointer: coarse) that hides the tooltip. ### How do I change the position and width of a wenk tooltip? Position uses the data-wenk-pos attribute or a .wenk--* class, with the top position as default. Width uses data-wenk-length or a length class, with small, medium, large and fit as the documented values. ### Which browsers does wenk not support? According to the README, citing doiuse.com, the browsers missing support are IE 8 and 10, Opera 12.1, Opera Mini 5.0 to 8.0 and IE Mobile 10. ## Sources - [Issues](https://github.com/tiaanduplessis/wenk/issues) - [License: MIT](https://github.com/tiaanduplessis/wenk/blob/master/LICENSE) - [Project website](https://tiaanduplessis.github.io/wenk/) - [README](https://github.com/tiaanduplessis/wenk/blob/master/README.md) - [tiaanduplessis/wenk on GitHub](https://github.com/tiaanduplessis/wenk) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tiaanduplessis-wenk