tiaanduplessis/wenk

:wink: Lightweight pure CSS tooltip for the greater good

Lightweight pure CSS tooltip for the greater good

Table of Contents

• About
• As Seen in
• Why
• Install
• Usage
• Demo
• Support
• Contributing
• License

About

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS.

As Seen in

• 20 Awesome Javascript & CSS Tooltip Libraries
• Create Minified Tooltips in Pure CSS with Wenk

Why

• It's Lightweight with the minified version being only 733 bytes when gzipped 😱
• It's easy to use
• It's easy to customize
• It's pure CSS
• You're already here

Install

Install with cdn

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

Install with npm

$ npm install wenk

Install with yarn

$ yarn add wenk

Usage

Simply add the data-wenk attribute to your HTML with the text you want to display.

<span data-wenk="This is a tooltip!"></span>

You can display the tooltip at different positions using the data-wenk-pos attribute or the .wenk--* class. The default position is at the top.

<span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span>
<span data-wenk="I'm to the left!" data-wenk-pos="left">Wenk to the left!</span>
<span data-wenk="I'm at the bottom!" data-wenk-pos="bottom">Wenk to the button!</span>
<!-- Or -->
<span class="wenk--right" data-wenk="I'm to the right!">Wenk to the right!</span>
<span class="wenk--left" data-wenk="I'm to the left!">Wenk to the left!</span>
<span class="wenk--bottom" data-wenk="I'm at the bottom!">Wenk to the button!</span>

The width of the tooltip can also easily be changed.

<span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span>
<span data-wenk="I'm medium!" data-wenk-length="medium">Medium wenk!</span>
<span data-wenk="I'm large!" data-wenk-length="large">Large wenk!</span>
<span data-wenk="I fit!" data-wenk-length="fit">I fit just right!</span>
<!-- Or -->
<span data-wenk="I'm small!" class="wenk-length--small">Small wenk!</span>
<span data-wenk="I'm medium!" class="wenk-length--large">Medium wenk!</span>
<span data-wenk="I'm large!" class="wenk-length--large">Large wenk!</span>
<span data-wenk="I fit!" class="wenk-length--fit">I fit just right!</span>

You can also align your text within the container

<p><span data-wenk="I'm right!" class="wenk-align--right">Wenk to the right!</span></p>
<p><span data-wenk="I'm center!" class="wenk-align--center">Wenk in the center!</span></p>

Demo

Check out the demo here.

Support

According to doiuse.com the following browsers are currently missing support:

• IE (8,10)
• Opera (12.1)
• Opera Mini (5.0-8.0)
• IE Mobile (10)

Contributing

All Contributions are welcome! Please open up an issue if you would like to help out. 😄

License

Licensed under the MIT License.

wenk's Issues

Wenk should close on mouse over

1. Hover over an element with a wenk tooltip
2. Move the mouse from the element onto the wenk tooltip
3. The wenk tooltip stays visible

Expected: Tooltip closes/gets hidden.

Create a message loop

Hello everyone, first of all congratulations for the work. Really enjoyed.
Actually, it's not an issue, it's a question, I'm trying to create a messaging loop but without success so far. Can you help me ?

Is fit working?

Hi there!

It's great to have alternatives for css tooltips, and this wenk looks a good one 👍

So, the first step to know a new component is to open the demo site, and see how it works. But I guess something is wrong with the fit option, which in my opinion should be the default option. I don't recall seeing any tooltips with blank spaces.

And after hovering it, this was the result:

It is saying that it fits, but it doesn't.

I'm testing using Chrome 53.

Best regards,
Rafael Pacheco.

Inline HTML

Hi! Great work! Would it possible to add a feature to allow for inline HTML? Thanks!

Add aria-describedby support

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.

difference from baloon.css

https://github.com/kazzkiq/balloon.css

how is this different from let's say, a similar project like baloon.css?
thank you

Scss files

Are you open to add scss src files to? Or do you feel it's better in a separate repo?

Stop propagation for underlying elements

When you use a wenk tooltip on a mobile device and the user wants to close it by clicking on it, and if there is an underlying element, the underlying element receives the click.

If the underlying element is a link, the user gets directed to the link.

Expected behavior: Tooltip should close.

How to fix this?

I hoped I could use Javascript, but as it seems, clicks on :before and :after elements cannot be caught: https://stackoverflow.com/q/7478336/1066234

Browser support?

Hi,

Can you please mention the supported browsers & especially IE versions? Better to add those details in README for 'greater good'

Thanks.

Question: How do I word wrap long text?

Hi,

This is a very cool implementation. I've got some long tooltips but could not figure out how to wrap the longer lines of text. Any suggestions would be greatly appreciated.

Thanks,

Karl