Minimal Clean Popover Plugin In jQuery - Popover.js

Minimal Clean Popover Plugin In jQuery - Popover.js
File Size: 8.95 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.