This time I will share jQuery Plugin and tutorial about jQuery Based Bootstrap Popover Enhancement Plugin – Bootstrap Popover X, hope it will help you in programming stack.
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.
How to use it:
1. To use this plugin, makes sure you have jQuery library and Bootstrap framework installed in your web project.
1 |
< link href = "/path/to/bootstrap.min.css" rel = "stylesheet" > |
2 |
< script src = "/path/to/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/bootstrap.min.js" ></ script > |
2. Include the Bootstrap Popover X plugin’s JavaScript and files in the page.
1 |
< link href = "bootstrap-popover-x.css" rel = "stylesheet" > |
2 |
< script src = "bootstrap-popover-x.js" ></ script > |
3. Create the Bootstrap Popover X content as follow:
01 |
< div id = "myPopover" class = "popover popover-default" > |
02 |
< div class = "arrow" ></ div > |
03 |
< h3 class = "popover-title" > |
04 |
< span class = "close pull-right" data-dismiss = "popover-x" >×</ span > |
07 |
< div class = "popover-content" > |
08 |
Popover content goes here |
10 |
< div class = "popover-footer" > |
4. Create a trigger button to toggle the popover.
1 |
< button data-toggle = "popover-x" |
2 |
data-target = "#myPopover" > |
5. Override the default styles of the popover. Accepted CSS classes:
- popover-default
- popover-primary
- popover-info
- popover-success
- popover-danger
- popover-warning
1 |
< div id = "myPopover" class = "popover popover-danger" > |
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
1 |
< button data-toggle = "popover-x" |
2 |
data-target = "#myPopover" |
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:
1 |
< button data-toggle = "popover-x" |
2 |
data-target = "#myPopover" |
3 |
data-trigger = "hover focus" > |
Changelog:
v1.4.8 (2020-01-29)
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.