Popouts are used to provide additional information or a subset of task-specific features that may be actionable or simply informative. The major difference between tooltips and popouts is the trigger event and the volume of information that can be displayed. Popouts are trigged by a click/touch and can display larger amounts of information as a result. They are closed when the trigger is clicked for a second time, the body of the page is clicked (area outside of active popout), or the "ESC" key is pressed.
Version 1.0+ of the plugin requires jQuery 1.7+, jQuery UI 1.8+ and Modernizr for feature detection of translate3d css transform support.
<link type="text/css" rel="stylesheet" href="mlb-popout.css">
<script src="mlb-popout.js"></script>
<div id="sample-button">
Sample Button
</div>
$('#sample-triggering-element').popout({ ... });
After a popout is generated, a separate div is created with a 'popout' class and is attached at the bottom of the DOM by default. The contents of the popout are specified on instantiation but can be updated by calling the 'sContent' option on the original element and specifying updated contents. For best results, style your triggering element with the 'active' class that is added when a popout is made visible through a pointer interaction.
$(':mlb-popout').popout('destroy');
Multiple options can be passed in when calling a new instance of a toggle switch. Some options can be modified after instantiation.
Assign a name to the popout on creation. This must be unique as an id is generated for the new popout from this parameter. If a name is not provided, incremental numbers are assigned.
Default: '1'$('#trigger').popout( { 'sName' : 'more-info' } );
Assign additional classes to the popout on creation.
Default: null$('#trigger').popout( { 'asClasses' : [ 'extra-class-1' , 'extra-class-2' ] } );
Pass a string of text, html, or a jQuery object into this parameter to generate the popout's contents
Default: 'Please add content to your popout.'$('#trigger').popout( { 'sContent' : $('<span>').addClass('awesome').html('This example was generated with an object.') } );
Turn animation on or off for modern browsers (Chrome, Safari, Opera, Firefox and IE10 +). If 'Modernizr.csstransforms3d' does not pass, animation is not utilized.
Default: true$('#trigger').toggleswitch( { 'bAnimate' : false } );
If your popout trigger element is positioned inside of a fixed position element (position: fixed;), set this flag to true to ensure accurate calculation of the popout's Y offset.
Default: false$('#trigger').popout( { 'bFixedWrapper' : false } );
Supply custom pixel, em or % width for your popout. For the consistent results, supply a width to ensure your popout is positioned correctly. Reflowing content within a popout may cause the dimensions to change if a width is not specified. Another option is to style your popout in an external stylesheet by supplying a static id with the "sName" configuration option.
Default: "auto"$('#trigger').popout( { 'sWidth' : '50%' } );
Supply custom pixel, em or % height for your popout
Default: "auto"$('#trigger').popout( { 'sHeight' : '200px' } );
Supply custom location to append popout. This is useful for keeping the DOM uncluttered if you're attaching/removing elements frequently.
Default: "body"$('#trigger').popout( { 'sAppendTo' : '#popout-container' } );
Supply function to be called on completion of popout creation. This is useful for binding contents within your popout.
Default: null$('#trigger').popout( { 'fnInitComplete' : function(){ alert('Popout initialized successfully!'); } } );
Supply function to be called when a popout is shown/opened
Default: null$('#trigger').popout( { 'fnOnShow' : function(){ alert('Popout opened') } } );
Supply function to be called when a popout is hidden/closed
Default: null$('#trigger').popout( { 'fnOnHide' : function(){ alert('Popout closed') } } );
Calculate where the popout should be drawn based on the position of the triggering element as well as the size if 'sWidth' and 'sHeight' are not specified. By default, this is bound to browser resize, device orientation change and on initial creation of a popout.
$('#trigger').popout('position');
Close all popouts. This is useful when triggering visibility of other UI elements in the interest of preventing collisions/overlapping.
$('#trigger').popout('hide');
Remove all traces of an instance of a popout
$('#trigger').popout('destroy');
The popout plugin's styles have been generated from a single SASS (mlb-popout.scss) file. If the triggering element is closer to the top or middle of the viewport, the popout is generated below. If the triggering element is closer to the bottom of the viewport, the popout is generated above. There are separate styles for each behavior.