Zebra Tooltips

a lightweight and highly configurable jQuery tooltips plugin


Download View on GitHub

See the examples with the tooltips using the bubble, the mariner or the milan theme.

Zebra Tooltips is a lightweight (around 6KB minified, 1.9KB gzipped) jQuery tooltips plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, 4 themes, and offering a wide range of configuration options.

Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden programmatically. When shown programmatically, the tooltips feature a "close" button and clicking it will be the only way of closing tooltips opened this way. This is useful for drawing users' attention to specific areas of a page (like error messages after validating a form).

Tooltips can be aligned left, center or right, relative to the parent element, as well as above or below the parent element. The library detects the browser window's edges and will make sure that the tooltips are always in the viewport.

The tooltips are created using NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff.

Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+



1. Basic usage

The simplest way to get going is simply attaching the tooltips to one or more elements. As far as the HTML markup goes, the title attribute is required as it contains the tooltip's content.

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

2. Tooltip alignment

Tooltips can be positioned horizontally on the left or on the right of an element, and above or below the element, vertically.

HTML

                    <p>
                        Tooltip on the

                        <a href="javascript: void(0)"
                           class="zebra_tooltips_left"
                           title="The arrow of the tooltip is on the left side of the element. Try making the browser
                                  window smaller and notice that no matter how the tooltip needs to be repositioned in
                                  order to stay inside the viewport, its arrow will always be on the left side of the
                                  element.">left</a>.

                        Tooltip on the

                        <a href="javascript: void(0)"
                           class="zebra_tooltips_right"
                           title="The arrow of the tooltip is on the right side of the element. Try making the browser
                                  window smaller and notice that no matter how the tooltip needs to be repositioned in
                                  order to stay inside the viewport, its arrow will always be on the right side of the
                                  element.">right</a>

                    </p>
                    

JavaScript

                    $(document).ready(function() {

                        new $.Zebra_Tooltips($('.zebra_tooltips_left'), {
                            position:   'left'
                        });

                        new $.Zebra_Tooltips($('.zebra_tooltips_right'), {
                            position:   'right'
                        });

                    });
                    

Result

Tooltip on the left. Tooltip on the right

By default, tooltips are shown above the element they are attached to. If there is not enought space above the parent element for the tooltip to fit in and still be visible, the tooltips will be shown below its parent element. This behaviour can be changed via the vertical_alignment property:

                    $(document).ready(function() {

                        new $.Zebra_Tooltips($('.zebra_tooltips_left_below'), {
                            position:           'left',
                            vertical_alignment: 'below'
                        });

                        new $.Zebra_Tooltips($('.zebra_tooltips_right_below'), {
                            position:           'right',
                            vertical_alignment: 'below'
                        });

                    });
                    

Result

Tooltip on the left. Tooltip on the right

3. HTML content

You can add any HTML as the tooltip's content. All you have to do is to replace < with &lt;, > with &gt; and " with &quot;

HTML

                    <p>
                        <a href="javascript: void(0)"
                           class="zebra_tooltips"
                           title="&lt;p&gt;Lorem ipsum &lt;strong&gt;dolor sit&lt;/strong&gt;, amet consectetur &lt;em&gt;adipisicing
                                  elit&lt;/em&gt;. Minus modi impedit ratione a nostrum harum animi, &lt;del&gt;voluptatibus&lt;/del&gt;
                                  laborum consequatur architecto corrupti sit nulla porro culpa aspernatur saepe non quas temporibus.
                                  &lt;/p&gt;&lt;p&gt;And yes, of course, an image:&lt;/p&gt;&lt;p&gt;
                                  &lt;img src=&quot;https://placeimg.com/100/100/animals&quot; height=&quot;100&quot;&gt;&lt;/p&gt;
                                  &lt;em&gt;IT IS VERY IMPORTANT TO EXPLICITLY SPECIFY THE HEIGHT OF THE IMAGE
                                  OR THE TOOLTIP WILL NOT BE RENDERED CORRECTLY!&lt;/em&gt;">
                        Hover me!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {

                        new $.Zebra_Tooltips($('.zebra_tooltips_html_content'));

                    });
                    

Result

4. Custom width

The default width of the tooltips is set in the CSS file but it can be set to any other value when initializing the tooltips.

HTML

                    <p>
                        When the content of your tooltips is longer, you might want to have

                        <a href="javascript: void(0)"
                           class="zebra_tooltips_custom_width_more"
                           title="When the content of your tooltips is longer, you might want to have wider
                                  tooltips, wherease when you less content, you might want to reduce the tooltip's width">
                        wider tooltips</a>

                        , whereas when you have less content you might want to

                        <a href="javascript: void(0)"
                           class="zebra_tooltips_custom_width_less"
                           title="I don't have much to say">reduce the tooltip's width</a>

                    </p>
                    

JavaScript

                    $(document).ready(function() {

                        new $.Zebra_Tooltips($('.zebra_tooltips_custom_width_more'), {
                            max_width:  470
                        });

                        new $.Zebra_Tooltips($('.zebra_tooltips_custom_width_more'), {
                            max_width:  90
                        });

                    });
                    

Result

When the content of your tooltips is longer, you might want to have wider tooltips, whereas when you have less content you might want to reduce the tooltip's width

5. Data attributes

Any of the properties of a tooltip can be set via data attributes. All you have to do is prefix any of the properties with ztt_.

HTML

                    <p>
                        <a href="javascript: void(0)"
                           class="zebra_tooltips"
                           title="All my settings are set through data attributes and made me have a maximum width of 500px,
                                  .5 opacity and be aligned to the right of my parent element"
                           data-ztt_max_width="500"
                           data-ztt_opacity=".5"
                           data-ztt_position="right">
                        Over here!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {

                        new $.Zebra_Tooltips($('.zebra_tooltips_data_attributes'));

                    });
                    

Result

6. Show tooltips programmatically


HTML

                    <p>
                        <a href="javascript: void(0)"
                           class="zebra_tooltips_programmatically"
                           title="I am tooltip which was shown programmatically instead of when hovering
                                  the parent element. As a consequence, I have a close button. Additionally -
                                  just this once - once I am closed I will not show anymore.">
                        Over here!</a>
                    </p>
                    

JavaScript

                    $(document).ready(function() {

                        var tooltip = new $.Zebra_Tooltips($('.zebra_tooltips_programmatically'));

                        tooltip.show($('.zebra_tooltips_programmatically'), true); // destroy on close

                    });
                    

Result

copyright © 2012 - 2018 stefan gabos