This time I will share jQuery Plugin and tutorial about Tooltip Like Html Content Preview Plugin With jQuery – Previewer, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="dist/jquery.previewer.js"></script> |
2. Create an image preview when you hover over the element ‘#demo1’
1 |
$('#demo1').previewer({ |
3. Create a text preview when you click/tap on the element ‘#demo2’
1 |
$('#demo2').previewer({ |
4 |
text: 'This is sample text' |
4. Create an html5 video preview when you click/tap on the element ‘#demo3’
1 |
$('#demo3').previewer({ |
5. Override the default CSS styles of the preview popup.
1 |
$('#element').previewer({ |
3 |
"border": "1px solid #999", |
4 |
"background-color": "#FFEE88", |
5 |
"border-radius": "5px", |
6. Callback functions.
1 |
$('#element').previewer({ |
2 |
beforeShow: function(){}, |
This awesome jQuery plugin is developed by jinqiangshou. For more Advanced Usages, please check the demo page or visit the official website.
