+

TinyTip.js

Tiny Tooltip jQuery Plugin

$ bower install tinytip

How To Use


<!-- first include jQuery library -->
<script src="./jQuery.js"></script>
<!-- Then tinytip plugin -->
<script src="./tinytip.js"></script>

$('.block.link').tinytip({
    //position [top|bottom|left|right]
    position : 'bottom',

    //tooltip position fix [+-][yx]
    fix : {
        top : -10,
        left: +20
    },

    //animation effect start position [+,-][top,left]
    //example +10 => animate up 10 pixels
    animation : {
        top : +10,
        left: -5,
    },

    //animation speed in milliseconds
    speed : 100,

    //tooltip text, or can be a jQuery object of
    //selected element
    tooltip : "Hi There" || $('.some-selector'),

    //when to show tooltip event (default: mouseenter)
    on : 'click',

    //when to hide tooltip event (default: mouseleave)
    off: 'click'

    //prevent tooltip close when hover over it
    preventClose : true,

    //callback function fired once the tooltip completely loaded
    //passes tooltip element jQuery object (e)
    onLoad : function(e){
        e.text('lool');
    },

    //add custom class to this tooltip
    addClass : 'unique'
});
Options
  • position :(string) where to place tooltip element [top|bottom|left|right]
  • fix :(object) fix tooltip relative position
    • top :([+|-]number) set top position
    • left :([+|-]number) set left position
  • animation :(object) animation start position effect
    • top :([+|-]number) set starting top position
    • left :([+|-]number) set starting left position
  • speed :(number) animation speed in milliseconds
  • easing :(string) custom easing option if you're using an easing jQuery plugin
    • Default : linear
  • tooltip :(string|jQuery Object) tooltip text/html/jQuery element selector
  • on :(string) tooltip show event (default: mouseenter)
  • off :(string) tooltip hide event (default: mouseleave)
  • preventClose :(boolean) set true to avoid hiding tooltip when leave and hover on tooltip element (default: false)
  • onLoad :(function) callback function to be fired when tooltip loaded completely
    • function will pass tooltip element jQuery object
  • addClass :(string) add custom class to this tooltip

Plain Examples

Hi There

Top Text

on hover

Bottom

on click

Fix Position

on click

Styled Examples

Top Text

on hover

Bottom Box

on hover

Data Attribute Examples