jQuery naoTooltips Plugin Demos


Tooltips made with jQuery and css.

Demo

Hover me! (top left position)
I'm an amazing tooltip! With a small size!
Hover me! (top middle position)
I'm an amazing tooltip! Medium size and I will appear at the top.
Hover me! (top right position)
I'm an amazing tooltip! Medium size and I will appear at the top.
Hover me! (bottom left position)
I'm an amazing tooltip! With a small size!
Hover me! (bottom middle position)
I'm an amazing tooltip! Medium size and I will appear at the bottom.
Hover me! (bottom right position)
I'm an amazing tooltip! Medium size and I will appear at the bottom.
Hover me! (right top Tooltip)
Hover me! (right top Tooltip)
Hover me! (right top Tooltip)
I'm an amazing tooltip! With a small size!
Hover me! (right middleTooltip)
Hover me! (right middleTooltip)
Hover me! (right middleTooltip)
I'm an amazing tooltip! With a small size!
Hover me! (right bottom Tooltip)
Hover me! (right bottom Tooltip)
Hover me! (right bottom Tooltip)
I'm an amazing tooltip! With a small size!
Hover me! (left top Tooltip)
Hover me! (left top Tooltip)
Hover me! (left top Tooltip)
I'm an amazing tooltip! With a large size and long content. My max width is 500px. I can display any kind of content. I will display my content in the left side.
Hover me! (left middle Tooltip)
Hover me! (left top Tooltip)
Hover me! (left top Tooltip)
I'm an amazing tooltip! With a large size and long content. My max width is 500px. I can display any kind of content. I will display my content in the left side.
Hover me! (left bottom Tooltip)
Hover me! (left bottom Tooltip)
Hover me! (left bottom Tooltip)
I'm an amazing tooltip! With a large size and long content. My max width is 500px. I can display any kind of content. I will display my content in the left side.

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`.