Fork me on GitHub

Zebra_Tooltips is a lightweight (around 6KB minified, 1.9KB gzipped) jQuery tooltips plugin, featuring nice transitions and offering a wide range of configuration options. The plugin detects the edges of the browser window and makes sure that the tooltips always stay in the viewport. Zebra_Tooltips uses NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff; also, tooltips can be attached to any element not just anchor tags! Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)



1. Basic usage


HTML

                    <p>
                        <a href="javascript: void(0)" class="zebra_tooltips"
                            title="Zebra_Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
                        Over here!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {
                        new $.Zebra_Tooltips($('.zebra_tooltips'));
                    });
                    

Result

To the top

2. Custom colors


HTML

                    <p>
                        <a href="javascript: void(0)" class="zebra_tooltips"
                            title="Zebra_Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
                        Over here!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {
                        new $.Zebra_Tooltips($('.zebra_tooltips'), {
                            background_color:   '#C40000',
                            color:              '#FFF'
                        });
                    });
                    

Result

To the top

3. Align tooltips relative to the parent element


HTML

                    <p>
                        Tooltip on the
                        <a href="javascript: void(0)" class="zebra_tooltips_left"
                            title="I am aligned to the left of the element!">
                        left</a>.

                        Tooltip on the
                        <a href="javascript: void(0)" class="zebra_tooltips_right"
                            title="I am aligned to the right of the element. Also, my width is different.">
                        right</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {
                        new $.Zebra_Tooltips($('.zebra_tooltips_left'), {
                            position:   'left',
                            max_width:  300
                        });
                        new $.Zebra_Tooltips($('.zebra_tooltips_right'), {
                            position:   'right',
                            max_width:  500
                        });
                    });
                    

Result

Tooltip on the left. Tooltip on the right
To the top

4. Show tooltips programatically


HTML

                    <p>
                        <a href="javascript: void(0)" class="zebra_tooltips"
                            title="Zebra_Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
                        Over here!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {
                        var zt = new $.Zebra_Tooltips($('.zebra_tooltips'));
                        zt.show($('.zebra_tooltips'), true); // destroy on close
                    });
                    

Result

To the top