jQuery Based Bootstrap Popover Enhancement Plugin - Bootstrap Popover X

jQuery Based Bootstrap Popover Enhancement Plugin - Bootstrap Popover X
File Size: 25.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple, lightweight jQuery plugin that enhance the default Bootstrap popover component with some additional and useful features.

Key Features:

  • Modal style popovers.
  • Smart auto position.
  • Supports more placements.
  • Supports Bootstrap contextual color styles: default, primary, info, success, danger, and warning.
  • Close button.
  • Custom trigger events: hover, click and focus.
  • Compatible with Bootstrap 3 & 4.

See also:

How to use it:

1. To use this plugin, makes sure you have jQuery library and Bootstrap framework installed in your web project.

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

2. Include the Bootstrap Popover X plugin's JavaScript and files in the page.

<link href="bootstrap-popover-x.css" rel="stylesheet">
<script src="bootstrap-popover-x.js"></script>

3. Create the Bootstrap Popover X content as follow:

<div id="myPopover" class="popover popover-default">
  <div class="arrow"></div>
  <h3 class="popover-title">
    <span class="close pull-right" data-dismiss="popover-x">&times;</span>
    Title here
  </h3>
  <div class="popover-content">
    Popover content goes here
  </div>
  <div class="popover-footer">
    Footer here
  </div>
</div>

4. Create a trigger button to toggle the popover.

<button data-toggle="popover-x" 
        data-target="#myPopover">
        Click me
</button>

5. Override the default styles of the popover. Accepted CSS classes:

  • popover-default
  • popover-primary
  • popover-info
  • popover-success
  • popover-danger
  • popover-warning
<div id="myPopover" class="popover popover-danger">
  ...
</div>

6. Specify where to position the popover using data-placement attribute. Accepted position classes:

  • right
  • left
  • top
  • bottom
  • top top-left
  • top top-right
  • bottom bottom-left
  • bottom bottom-right
  • left left-top
  • left left-bottom
  • right right-top
  • right right-bottom
  • auto
  • auto-top
  • auto-right
  • auto-bottom
  • auto-left
  • horizontal
  • vertical
<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-placement="top">
        Click me
</button>

7. By default the popover will be opened by click on the trigger button. You're able to change the default trigger event in the data-trigger attribute as this:

<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-trigger="hover focus">
        Click me
</button>

Changelog:

v1.4.7 (2018-09-14)

  • Enhance bootstrap 4 arrow positioning via CSS class is-bs4 on popover container.
  • New dialogCss property to allow setting dialog CSS style attributes before load.

v1.4.5 (2017-09-08)

  • Enhancements to support Bootstrap v4.x framework

v1.4.4 (2017-09-07)

  • Code enhancements for jQuery 3.x

v1.4.3 (2017-01-09)

  • Correct popover marker div rendering
  • More correct styles for popover-x positioning behind BS navbar

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