Tooltip Like Html Content Preview Plugin With jQuery - Previewer

Previewer is a jQuery plugin which enables the user to preview html content (text, images, videos) in a tooltip-style popup when mouse hover or click (tap).

How to use it:

1. Load the latest version of jQuery library and the jQuery previewer plugin's script in the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.previewer.js"></script>

2. Create an image preview when you hover over the element '#demo1'

$('#demo1').previewer({
  trigger: 'hover', 
  type: 'image', 
  src: 'https://unsplash.it/250/250?image=1084'
});

3. Create a text preview when you click/tap on the element '#demo2'

$('#demo2').previewer({
  trigger: 'click',
  type: 'text',
  text: 'This is sample text'
});

4. Create an html5 video preview when you click/tap on the element '#demo3'

$('#demo3').previewer({
  trigger: 'click',
  type: 'video',
  src: 'sample.mp4'
});

5. Override the default CSS styles of the preview popup.

$('#element').previewer({
  containerCSS: {
    "border": "1px solid #999",
    "background-color": "#FFEE88",
    "border-radius": "5px",
    "padding": "6px"
  }
});

6. Callback functions.

$('#element').previewer({
  beforeShow: function(){}, 
  onShow: function(){}
});

---

This awesome jQuery plugin is developed by jinqiangshou. For more Advanced Usages, please check the demo page or visit the official website.