Lightweight and highly configurable jQuery tooltips

<h3>1. Basic Usage</h3>
<p class="well">
    <a href="javascript: void(0)" class="zebra_tooltips" title="Zebra Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
    Over here!</a>
</p>

<h3>
    2. Tooltip alignment
</h3>
<p class="well">
    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>
<p class="well">
    Tooltip on the
 
    <a href="javascript: void(0)"
       class="zebra_tooltips_left_below"
       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 below</a>.
 
    Tooltip on the
 
    <a href="javascript: void(0)"
       class="zebra_tooltips_right_below"
       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 below</a>
 
</p>

<h3>3. HTML content</h3>
<p class="well">
    <a href="javascript: void(0)"
       class="zebra_tooltips_html_content"
       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>

<h3>4. Custom width</h3>

<p class="well">
    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>

<h3>5. Data attributes</h3>
<p class="well">
    <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>

<h3>6. Show tooltips programmatically</h3>

<p class="well">
    <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>

//1. Basic usage
$(document).ready(function() {
 
    new $.Zebra_Tooltips($('.zebra_tooltips'));
 
});

//2. Tooltip alignment
$(document).ready(function() {
 
    new $.Zebra_Tooltips($('.zebra_tooltips_left'), {
        position:   'left'
    });
 
    new $.Zebra_Tooltips($('.zebra_tooltips_right'), {
        position:   'right'
    });
 
});

$(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'
    });
 
});

//3. HTML content
$(document).ready(function() {
 
    new $.Zebra_Tooltips($('.zebra_tooltips_html_content'));
 
});

//4. Custom width
$(document).ready(function() {
 
    new $.Zebra_Tooltips($('.zebra_tooltips_custom_width_more'), {
        max_width:  470
    });
 
    new $.Zebra_Tooltips($('.zebra_tooltips_custom_width_less'), {
        max_width:  90
    });
 
});

//5. Data attributes
$(document).ready(function() {
 
    new $.Zebra_Tooltips($('.zebra_tooltips_data_attributes'));
 
});

//6. Show tooltips programmatically
$(document).ready(function() {
 
    var tooltip = new $.Zebra_Tooltips($('.zebra_tooltips_programmatically'));
 
    tooltip.show($('.zebra_tooltips_programmatically'), true); // destroy on close
 
});