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+)

Installation

                    
                    <link rel="stylesheet" href="path/to/zebra_tooltips.min.css">

                    
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Tooltips/dist/zebra_tooltips.min.css">

                    
                    <script type="text/javascript" src="path/to/jquery.js"></script>

                    
                    <script type="text/javascript" src="path/to/zebra_tooltips.min.js"></script>

                    
                    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Tooltips/dist/zebra_tooltips.min.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!