Clean Popover With Smart Position - gpopover

Clean Popover With Smart Position - gpopover

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.

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.

  • Publication date: 05.04.2019
  • Source