【jQuery】非常に小さなツールチップjQueryプラグインTinyTip

jQuery

TinyTip

October 25, 2016

TinyTipはCSSはなく、非常に小さなツールチップjQueryプラグイン。

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

  1. position
  2. fix
  3. animation
  4. speed
  5. easing
  6. tooltip
  7. on
  8. off
  9. preventClose
  10. onLoad
  11. addClass

MIT
Demo/Download

Latest Posts

Related Posts