A free, ultra lightweight jQuery tooltip plugin. It is only ~1KB gzipped.
View on Github Download


Step by step install the plugin.

Install with npm

npm install ztip --save


Install with yarn

yarn add ztip


Manual install

Download the most recent version from Github and include the unzipped files in your project. Use the top link on this page.

Getting started

Step by step create the first ztip instance.

jQuery: Make sure that jQuery library is installed. If it is not that add the following line:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS: Next include the CSS in document <head>:

<link rel="stylesheet" href="ztip.css" />

JS: And the JS just before the closing </body> tag:

<script src="ztip.min.js"></script>

Init: After this line add the following code to create the first instance:


HTML: In this example we selected all .my-tooltip classes. The will become targets for tooltips.

<span class="my-tooltip" title="My tooltip text">Hover me</span>


        // Theme
        theme: 'default',

        // attr:title | > .child-elem | .dom-elem | function callback
        source: 'attr:title',

        // Tooltip positon relative to element top | bottom
        position: 'top',



A few examples that demonstrates the plugin's power.

Default example

This is the default example with default settings.



I believe that themes are something that every developer should create based on project requirements. Here are just a few, most basic examples.

Theme: red Theme: blue Theme: green Theme: white


But default zTip gets the tooltip text from title attribute of current element(hover on). However you are not limited only to this. You can use any other element attribute or DOM element.

data-* Get a child element Get DOM element Callback
Using a callback function in source option.


By default the tooltip will be on top of target element and will auto arrange itself depending on current viewport.

? ? ? ? ? ? ? ?