Step by step install the plugin.
npm install ztip --save
or
yarn add ztip
or
Download the most recent version from Github and include the unzipped files in your project. Use the top link on this page.
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:
<script>
jQuery(document).ready(function($){
$(".my-tooltip").zTip();
});
</script>
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>
<script>
$(".my-tooltip").zTip({
// Theme
theme: 'default',
// attr:title | > .child-elem | .dom-elem | function callback
source: 'attr:title',
// Tooltip positon relative to element top | bottom
position: 'top',
});
</script>
A few examples that demonstrates the plugin's power.
This is the default example with default settings.
DefaultI 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: whiteBut 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.
By default the tooltip will be on top of target element and will auto arrange itself depending on current viewport.