Minimal Clean Popover Plugin In jQuery - Popover.js

A minimal, clean, smart, customizable popover plugin that attaches a tooltip-like popup containing title & content to any DOM element on hover/click/focus.

More features:

• Auto re-positions the popover when there is no enough space to display the whole popover.
• Also provides 12 placement options.
• Can be triggered via Click, Hover, or Focus events.
• Allows you to specify the delay time in milliseconds.

How to use it:

1. To get started, include jQuery library and the Popover plugin's files on the webpage.

<link href="popover.css" rel="stylesheet" />
<script src="/path/to/jquery.min.js></script>
<script src="popover.js"></script>

2. Attath the popover plugin to an element and define the title & content to be displayed in the popover.

<div id="popover">Hover Me</div>

$('#popover').popover({
  title : 'My Title',
  content : 'My Content'
});

3. Customize the trigger event:

• hover (default)
• click
• focus

$('#popover').popover({
  trigger : 'click'
});

4. Set the time to wait before showing the popover. Default: 10ms.

$('#popover').popover({
  delay : 300
});

5. Enable/disable the auto position functionality. Default: true.

$('#popover').popover({
  autoPlace : false
});

6. Customize the init position of the popover.

• 'top' (Default)
• 'topLeft'
• 'topRight'
• 'right'
• 'rightTop'
• 'rightBottom'
• 'bottom'
• 'bottomLeft'
• 'bottomRight'
• 'left'
• 'leftTop'
• 'leftBottom'

$('#popover').popover({
  placement : 'right'
});

---

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