Zebra_Tooltips Demos

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>
            

1. Basic usage

The HTML:

            <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
            hendrerit neque congue pretium iaculis justo laoreet orci elit
            <a href="#" class="zebra_tips1" title="Zebra_Tooltips is a lightweight (around 5KB
            minified, 1.6KB gzipped) tooltip jQuery plugin for creating simple, but smart and
            visually attractive tooltips, featuring nice transitions and offering a wide range of
            configuration options.">condimentum</a>. Eros natoque Curabitur accumsan eget quis
            porttitor Sed Vestibulum amet sed.</p>
            

The JavaScript:

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

The result:

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit 鼠标移动到这里查看效果. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

2. Custom colors

The HTML:

            <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
            hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#"
            class="zebra_tips2" title="Appearance can be easily customized both through JavaScript
            and/or CSS. Also, tooltips can be aligned left, center or right relative to the parent
            element.">condimentum</a>. Eros natoque Curabitur accumsan eget quis porttitor Sed
            Vestibulum amet sed.</p>
            

The JavaScript:

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

The result:

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

3. Align tooltips relative to the parent element

The HTML:

            <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
            hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#"
            class="zebra_tips4" title="Hello! I am aligned to the left of the element. Also, my
            width is different.">left</a>. Lorem ipsum dolor sit amet consectetuer facilisis
            lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci
            elit <a href="#" class="zebra_tips5" title="Hello! I am aligned to the right of the
            element. Also, my width is different.">right</a>. Eros natoque Curabitur accumsan eget
            quis porttitor Sed Vestibulum amet sed.</p>
            

The JavaScript:

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

The result:

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit left. Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit right. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

4. Show tooltips programatically

The HTML:

            <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
            hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#"
            class="zebra_tips3" title="Zebra_Tooltips makes use of NO IMAGES (everything is
            handled from CSS), 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+)">condimentum</a>. Eros natoque Curabitur accumsan eget quis porttitor Sed
            Vestibulum amet sed.</p>
            

The JavaScript:

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

The result:

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.