Bootstrap-style Popover Plugin For jQuery - hunterPopup

Bootstrap-style Popover Plugin For jQuery - hunterPopup
File Size: 5.11 KB
Views Total: 4573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

hunterPopup is a lightweight jQuery plugin used to create tooltip-style popup boxes with customizable contents, titles and sizes, which will appear next to any DOM elements when clicked. Similar to the Bootstrap framework's popover component.

How to use it:

1. Load the required CSS file hunterPopup.css to style the popup boxes.

<link rel="stylesheet" href="hunterPopup.css">

2. Add your own popover content to a hidden container element as this:

<div id="tableContent" style="display:none">
  ...
</div>

3. Load jQuery library and the JavaScript file jquery-popup.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-popup.js"></script>

4. Attach the plugin to any element where you want to display the popover when clicked.

$('#el').hunterPopup({
  content: $('#tableContent')
});

5. Config the popover:

$('#el').hunterPopup({

  // popover title
  title: 'My Title',

  // position of arrow indicator
  placement: 'left',

  // popover size
  width: '100%',
  height: '100%',

  // custom event function
  event: closePopup
  
});

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