😉 Lightweight pure CSS tooltip for the greater good
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
media
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
package.json
yarn.lock

README.md

wenk

Lightweight pure CSS tooltip for the greater good



Built with ❤︎ by Tiaan and contributors

Table of Contents

Table of Contents
  • Introduction
  • Why
  • Install
  • Usage
  • Demo
  • Support
  • Contributing
  • License
  • Introduction

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

    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

    wenk

    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.