Handy-Tooltip

A very simple & useful toolkit that can be used easily with very simple API. Screenshots below.

If you're reading on npmjs website, please visit GitHub page for better documentation!!

Quick links

1. Screenshots
2. Requirements
3. Usage
4. API
5. Contribute

Screenshots

These screenshots are from React-Instagram-clone-2.0!!

Requirements

1. jQuery

Usage

1. First install the package with npm or Yarn.

   npm install handy-tooltip
   

   or

   yarn add handy-tooltip
   

2. Create a div with id hoverdiv.

   <div id='hoverdiv'></div>
   

3. Go to handy-tooltip.css & copy everything of it into your stylesheet.

4. And here comes the fun part.

   import HandyTooltip from 'handy-notification'
   HandyTooltip({
       value: "Like",            // Message to be displayed
       selector: $('.like_btn')  // selector you want tooltip of
   })
   

You can also work with attributes.

<a href='#' class='link' data-tooltip='Link!' >I am a cool link</a>

import HandyTooltip from 'handy-notification'
HandyTooltip({
    selector: $('.link')  // selector you want tooltip of
})

If you think Hoverdiv is not at your desired position, see the API.

API

HandyTooltip(options:Object)
options = {
    value,
    selector,
    extraTop,
    extraLeft
}

Contribute

Show your support by 🌟 the project!!

Feel free to contribute!!

Thanks for reading!!