samirqq/Handy-Tooltip

A very handy & useful toolkit (which shows up when hover over something) that can be used easily with very simple API. Can be used a jQuery plugin as well. Screenshots below!! 💬💬💬

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 with npm or Yarn
4. Usage as a jQuery plugin
5. API

Screenshots

These screenshots are from Instagram-clone I created & you can use the code with 5 simple & straight-forward steps!!

Requirements

1. jQuery

Usage with npm or Yarn

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.

Usage as a jQuery plugin

1. Copy handy-tooltip-plugin.js into your project & include it.

<script src='/handy-tooltip-plugin.js'></script>

2. Create a div with id hoverdiv.

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

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

4. And here comes the fun part.

$('.like_btn').HandyTooltip({
  value: "Like"
})

You can also work with attributes.

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

$('.like_btn').HandyTooltip()

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

API

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

value

This will be the message.

selector

Selector you want to show tooltip of (NOTE: Not availabe to jQuery plugins).

extraTop

If hoverdiv is not at your desired position, adjust this property for top position.

extraLeft

If hoverdiv is not at your desired position, adjust this property for left position.

Thanks for reading!!