See the examples with the tooltips using the bubble, the mariner or the milan theme.
Zebra Tooltips is a lightweight (around 5KB minified, 1.7KB gzipped) and accessible 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.Tooltips are also accessible via keyboard only - try moving with the tab key!
Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+
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
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
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
You can add any HTML as the tooltip's content. All you have to do is to replace <
with <, > with > and "
with "
HTML
<p>
<a href="javascript: void(0)"
class="zebra_tooltips"
title="<p>Lorem ipsum <strong>dolor sit</strong>, amet consectetur <em>adipisicing
elit</em>. Minus modi impedit ratione a nostrum harum animi, <del>voluptatibus</del>
laborum consequatur architecto corrupti sit nulla porro culpa aspernatur saepe non quas temporibus.
</p><p>And yes, of course, an image:</p><p>
<img src="https://loremflickr.com/220/100" height="100"></p>
<em>IT IS VERY IMPORTANT TO EXPLICITLY SPECIFY THE HEIGHT OF THE IMAGE
OR THE TOOLTIP WILL NOT BE RENDERED CORRECTLY!</em>">
Hover me!</a>
</p>
JavaScript
$(document).ready(function() {
new $.Zebra_Tooltips($('.zebra_tooltips_html_content'));
});
Result
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
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
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