Installation

                    
                    <link rel="stylesheet" href="path/to/zebra_tooltips.css" type="text/css">
                    
                    <script type="text/javascript" src="path/to/jquery.js"></script>
                    
                    <script type="text/javascript" src="path/to/zebra_tooltips.js"></script>
                    

---

Basic usage

HTML

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

JavaScript

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

Result

Over here!

---

Custom colors

HTML

                    <p><a href="javascript: void(0)" class="zebra_tips1" title="Appearance can be easily
                    customized both through JavaScript and/or CSS. Tooltips can be aligned left, center or right, relative
                    to the parent element.">Over here!</a></p>
                    

JavaScript

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

Result

Over here!

---

Align tooltips relative to the parent element

HTML

                    <p>Tooltip on the <a href="javascript: void(0)" class="zebra_tips4" title="Hello! I am aligned to the left of
                    the element!">left</a>. Tooltip on the <a href="javascript: void(0)" class="zebra_tips5" title="Hello! 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_tips4'), {
                            'position':     'left',
                            'max_width':    300
                        });
                        new $.Zebra_Tooltips($('.zebra_tips5'), {
                            'position':     'right',
                            'max_width':    500
                        });
                    });
                    

Result

Tooltip on the left. Tooltip on the right

---

Show tooltips programatically

HTML

                    <p><a href="javascript: void(0)" class="zebra_tips3" title="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!<br>Works in all major browsers (Firefox, Opera, Safari, Chrome,
                     Internet Explorer 6+)">Over here!</a></p>
                    

JavaScript

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

Result

Over here!