Full Featured jQuery Tooltip & Popup Window Plugin - tiktok.js
File Size: | Unknown |
---|---|
Views Total: | 2966 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tiktok.js is a responsive, powerful jQuery popup plugin which lets you create tooltips, notifications, alert/confirm boxes and any other popup windows with ease.
Features:
- Creates tooltips on DOM elements when hovering.
- Creates notification popups on the screen.
- Modal like dialog boxes with custom callbacks.
- AJAX content supported.
- Lots of options and API.
How to use it:
1. You first have to load the latest version of jQuery library in the document.
<script src="//code.jquery.com/jquery.min.js"></script>
2. Download and load the jQuery tiktok.js plugin's files in the document.
<link rel="stylesheet" href="css/tiktok.css> <script src="js/tiktok.min.js"></script>
3. Create a tooltip attaching to a specified element.
$('#el').tiktok({ type: 'floattip', content : { 'content':'Tooltip Content' } });
4. Create an alert notification bar displaying at the top of the webpage.
$('#el').tiktok({ type: 'poptip', status:'error', content : { 'content':'Alert Messag' } }); $('#el').tiktok('show');
5. Create a loading indicator displaying in the middle of the screen.
$('#el').tiktok({ type: 'popload', content : { 'title':'Please Wati...', 'content':'Loading...' } }); $('#el').tiktok('show');
6. Create a modal-like confirm dialog box with custom callback functions.
$('#el').tiktok({ type: 'popbox', content : { 'title':'Confirm Window', 'content':'Are You Sure' }, onCancel:function(){ alert('You just clicked Cancel button') }, onConfirm:function(){ alert('You just clicked Confirm button') } }); $('#el').tiktok('show');
7. All default options.
// animation speed animateSpeed: 400, // animation delay delay: 200, // theme color themeColor :'#0082e5', // title color titleColor : '#0082e5', // done,alert,error,default status : 'default', // position position : 'top', // popbox, poptext, popload, floattip, poptip type : null, // custom content content : { 'title':'tip_title', 'content':'tip_content', 'picurl':null }, // text for cancel button buttonCancel: 'Cancel', // text for confirm button buttonConfirm: 'Confirm', // alignment of header headerAlign : 'center', // alignment of content contentAlign : 'left', // ajax content ajaxContentUrl: null, // callbacks onConfirm:null, onCancel:null, onBeforeShow: null, onShow: null, onHide: null
8. Public methods.
// show the popup $('#el').tiktok('show'); // hide the popup $('#el').tiktok('hide'); // destroy the popup $('#el').tiktok('destroy'); // update options/content $('#el').tiktok('update','content',{content:$('#el').val()});
This awesome jQuery plugin is developed by Limlift. For more Advanced Usages, please check the demo page or visit the official website.