Clean Popover With Smart Position - jQuery gpopover
File Size: | 7.53 KB |
---|---|
Views Total: | 3331 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

gpopover is a small clean jQuery popover plugin that has the ability to check and reposition the popover elements if they're out of the viewport.
How to use it:
1. First you need to load the latest jQuery library, and then include the stylesheet jquery.gpopover.css
and script jquery.gpopover.js
on the webpage.
<link href="jquery.gpopover.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="jquery.gpopover.js"></script>
2. Create the popover content which can be located wherever you like in the page markup.
<div id="popover-content" class="gpopover"> Popover Content Here </div>
3. Attach the popover content to a trigger element using the data-popover
attribute:
<button id="trigger-example" data-popover="popover-content"> Click Me </button>
4. Specify the width of the popover. Default: 250px.
$('#trigger-example').gpopover({ width: 300 });
5. Customize the duration of fadeIn and fadeOut animations.
$('#trigger-example').gpopover({ fadeInDuration: 65, fadeOutDuration: 65 });
6. Prevent click within the popover from being propagated to the document (and thus stop the popover from being hidden). Default: false.
$('#trigger-example').gpopover({ preventHide: true });
7. Set the space between the popover and screen edge. Default: 10px.
$('#trigger-example').gpopover({ viewportSideMargin: 20 });
8. Callback functions which will be fired when the popover is shown and hidden.
$('#trigger-example').gpopover({ onShow: function() {}, onHide: function() {} });
9. Customize the apperance of the popover by overring the default CSS styles:
.gpopover { background-color: #FFF; border: 1px solid #CCC; border-color: rgba(0, 0, 0, 0.2); border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: none; padding: 12px; position: absolute; z-index: 998; } .gpopover .gpopover-arrow { border: 8px solid transparent; border-bottom-color: #FFF; border-top-width: 0; height: 0; position: absolute; width: 0; z-index: 999; } .gpopover .gpopover-arrow-shadow { border: 8px solid transparent; border-bottom-color: #C0C0C0; border-bottom-color: rgba(0, 0, 0, 0.275); border-top-width: 0; height: 0; position: absolute; width: 0; z-index: 997; }
This awesome jQuery plugin is developed by markembling. For more Advanced Usages, please check the demo page or visit the official website.