Zebra_Tooltips Demos

Installation

1
2
3
4
5
6
<!-- load the CSS file -->
<link rel="stylesheet" href="path/to/zebra_tooltips.css" type="text/css">
<!-- load jQuery -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- load the Zebra_Tooltips plugin -->
<script type="text/javascript" src="path/to/zebra_tooltips.js"></script>
1. Basic usage

The HTML:

1
2
3
4
5
6
7
<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:

1
2
3
$(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:

1
2
3
4
5
6
<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:

1
2
3
4
5
6
$(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:

1
2
3
4
5
6
7
8
<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:

1
2
3
4
5
6
7
8
9
10
$(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:

1
2
3
4
5
6
7
8
<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!<br>
<br>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:

1
2
3
4
$(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.

 

 

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