This library includes 5 components:
popModal - popup window, displayed near the parent element. Invoked by clicking on an element
notifyModal - notification popup, displayed on top of all elements. Invoked by event and hide after a certain time
hintModal - tooltip, displayed near the parent element. Invoked on mouse hover on an element and hide after element lost focus
dialogModal - modal dialog, displayed on top of all elements. Invoked by clicking on an element
titleModal - tooltip, displayed near the parent element, replace native title. Invoked on mouse hover on an element and hide after element lost focus

For work required only jQuery, other libraries are not required.

DEMO

$(el).popModal({param1 : value1, param2 : value2, ...});

$(el).click(function(){
  $(el).popModal({param1 : value1, param2 : value2, ...});
});

$(el).popModal({param1 : value1, param2 : value2, ...});

Also you may use inline bind

<button id="elem" data-popModalBind="#content" data-placement="bottomLeft" data-showCloseBut="true" data-overflowContent="true" data-onDocumentClickClose="true">example</button>

Popup is dynamically created. When you create the second popup, the first will be deleted!
For create footer in popup, use element div with class="popModal_footer". You can use attribute for element data-popModalBut="close" for close popup, also you can press ESC, or click on any place.

$(content).notifyModal({param1 : value1, param2 : value2, ...});

hintModal();

Use: You need to create html with class="hintModal" as parent element and put in this element div with class="hintModal_container", put here html, to be displayed.
To change position, add additional class class="hintModal_center" or class="hintModal_right" to parent element.

$(content).dialogModal({param1 : value1, param2 : value2, ...});

$(el).click(function(){
  $(content).dialogModal({param1 : value1, param2 : value2, ...});
});

$(content).dialogModal({param1 : value1, param2 : value2, ...});

Dialog is dynamically created. When you create the second dialog, the first will be deleted!
You need to create div elements with classes class="dialogModal_header" - for show header, class="dialogModal_content" - for show content, and class="dialogModal_footer" - for show footer.
You can use attribute for element data-dialogModalBut="close" for close dialog, also you can press ESC. To show collection of content, like pages in one modal dialog, use class for this dialogs. If you want to use collection of content, you can change content by clicking to arrows, or press left/right arrow on keayboard.

Use: You need to put attribute title and data-titleModal="title".
titleModal will show by default at the bottom, to change position, put attribute data-placement="top". You can use top, left or right.

$(el).popModal({
  html : $(content).html(),
  placement : 'bottomLeft',
  showCloseBut : true,
  overflowContent : true,
  onOkBut : function(){},
  onCancelBut : function(){},
  onLoad : function(){},
  onClose : function(){}
});

$(el).popModal({
  html : function(callback) {
    $.ajax({url:'ajax.html'}).done(function(content){
      callback(content);
    });
  }
});

$(content).notifyModal({
  duration : 2500,
  placement : 'center',
  onTop : true
});

<div class="hintModal">
  hover on me
  <div class="hintModal_container">
    text for hintModal
  </div>
</div>

$(content).dialogModal({});

<div title="Title text" data-titleModal="init" data-placement="top">Text</div>