EasyPop - The ridiculously easy to use jQuery popup bubble

EasyPop Top EasyPop Bottom
JS
  1. <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easypop.js"></script>
  2. <script>
    $(function(){
        $('body').easypop();
    })
    </script>
HTML
  1. <a href="#" class="popup-top" data-popup="Yup that was pretty easy!" data-popup-position="top">EasyPop Top</a>
  2. <a href="#" class="popup-bottom" data-popup="This really is ridiculously easy!" data-popup-position="bottom">EasyPop Bottom</a>
CSS
  1. .popup-bubble { position: absolute; background: #454545; top:0px; left:0px; border-radius: 2px; color:#fff; text-align: center; font-size: 10px; padding:4px 8px 4px 8px; display: none;}
  2. .popup-bubble:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
  3. .popup-bubble:after { border-color: rgba(0, 0, 0, 0); border-top-color: #454545; border-width: 3px; left: 50%; margin-left: -3px; }
  4. .popup-bubble.bottom-bubble:after { top:auto; bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
  5. .popup-bubble.bottom-bubble:after { border-color: rgba(0, 0, 0, 0); border-top-color:transparent; border-bottom-color: #454545; border-width: 3px; left: 50%; margin-left: -3px; }

Options

Currently there is only one option available. More to come.

position Defines whether the popup is on top or bottom. Currently the default is 'top'
USAGE
  1. $(function(){
        $('body').easypop({position: 'bottom'});
    })

Customizable

What's great about EasyPop is it can be customized based on the element it's connected to. So if you want to pad the popup on a single element you can. If you want the popup to show on the bottom of one element and the top of another you can do that too.

data-popup-position Defines whether the popup is on top or bottom of a specific element. Options are 'top' and 'bottom'
data-popup-padding Defines the padding from the left of the popup. A negative value can be used.
Example
  1. <a href="#" class="popup-bottom" data-popup="This will be on the bottom" data-popup-position="bottom">EasyPop Bottom</a>
  2. <a href="#" class="popup-padded" data-popup="This will be padded left by 30 pixels" data-popup-padding="30">EasyPop Padded</a>
Download