jQuery naoTooltips Plugin Demos

---

Tooltips made with jQuery and css.

Demo

Setup and usage

Setup

    <!-- Include jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <!-- Include `naoTooltips.css` -->
    

    <!-- Include `naoTooltips.js` plugin -->
    <script src="naoTooltips.js"></script>

HTML Structure

    <!-- Use the class `naoTooltip-wrap` to wrap all the content and tooltip inside -->
    <div class="naoTooltip-wrap">

        <!-- Put your content in any kind of tag -->
        <span>Hover me! (right Tooltip)</span>

        <!--
            Use the class `naoTooltip` along with the classes `nt-right/nt-left/nt-top/nt-bottom`
            depending where do you want to display your tooltip and the classes
            `nt-small/nt-medium/nt-large` to set the desire size
        -->
        <div class="naoTooltip nt-right nt-small">
            I'm an amazing tooltip! With a small size!
        </div>

    </div>

Plugin Usage

    /* Initialise all the tooltips using the wrapper class */
    $('.naoTooltip-wrap').naoTooltip();

    /* Or initialise customising the speed (by default is 400) */
    $('.naoTooltip-wrap').naoTooltip({ speed: 200 });

Options

speed: 200 / 400 / 600 / 'slow' / 'fast'
This is the speed to hide and show the tooltip with the fade effect.
The default option is `400`.