Full Featured jQuery Tooltip & Popup Window Plugin - tiktok.js

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.