--- layout : 'default' css : 'popup' element : 'popup' elementType : 'module' title : 'Popup' description : 'A popup displays additional information on top of a page element' type : 'UI Module' themes : ['Default'] --- <%- @partial('header', { tabs: 'module' }) %>
Types Variations

Types

Popup

A standard popup

Title

A popup can be formatted with a title

PonyDog22

HTML

A popup can be formatted with html

Variations

Width

A popup can be extra wide to allow for longer content

Fluid

A fluid popup will take up the entire width of its offset container

Show fluid popup
1
2
3
4

Size

A popup can vary in size

Inverted

A popup can have its colors inverted

Initializing

Initializing an popup

$('.ui.popup') .popup() ;

Including content with HTML Metadata

Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata

Specifying Content

Popups can specify content in three ways:

  • Using html title attribute
  • Using data-content attribute
  • Using data-html for specific html
  • Using the content property in the initialization of the popup

Popups can also specify some other frequently used settings using metadata

  • data-variation: the popup variation to use
  • data-offset: a pixel offset correction for popup
  • data-position: the side to position popup on
  • data-variation: the popup variation to use

Initializing with metadata

Or

Initializing with javascript content

$('.ui.popup') .popup({ content: 'Hello I am a popup' }) ;

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .popup('behavior name', argumentOne, argumentTwo) ;
Behavior Description
show Shows popup
hide Hides popup
hide all Hides all visible pop ups on the page
toggle Toggles visibility of popup
is visible Returns whether popup is visible
is hidden Returns whether popup is hidden
exists Returns whether popup is created and inserted into the page
set position(position) Repositions a popup
remove Removes popup from the page

Wide Popup Menu

An easier way to display complex content, like a wide popup menu is to have the popup content as a pre-existing part of your page's html.

Using the setting inline: true will let Semantic know to display the next sibling ui popup element after the activator.

Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu

$('.example .menu .browse') .popup({ inline : true, hoverable: true, position : 'bottom left', delay: { show: 300, hide: 800 } }) ;
Home Browse
1
2
3
4

Specifying a selector for a popup

If its not possible to include the popup content as the next sibling, you can also specify a custom selector to help link the popup contents to its activator.

$('.example .custom.button') .popup({ popup : $('.custom.popup'), on : 'click' }) ;
Show custom popup
I'm not on the same level as the button, but i can still be found.

Specifying a trigger event

A popup trigger event can be specified

$('.example .teal.button') .popup({ on: 'click' }) ; $('.example input') .popup({ on: 'focus' }) ;
Click Me

Target Element

A popup can specify a different target element than itself to show a popup

$('.test.button') .popup({ position : 'right center', target : '.test.image', title : 'My favorite dog', content : 'My favorite dog would like other dogs as much as themselves' }) ;
Hover Me

Inline or relative to page

A popup can either be inserted directly after an element, or added as a child element to the page's body.

Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements
If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.
/* this will only style the popup if inline is true */ .example .popup { color: #FF0000; }
$('.inline.icon') .popup({ inline: true }) ;

Positioning

A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.

Specifying an offset

A popup position can be adjusted manually by specifying an offset property using data-offset="value"

Transitions

A popup can use any named ui transition.

Home
Choose a transition
Horizontal Flip
Vertical Flip
Fade Up
Fade
Scale
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon') .popup({ transition: value }) .popup('toggle') ; } }) ;

Popup Settings
Settings to configure popup behavior

Setting Default Description
context body Selector or jquery object specifying where the popup should be created
position top center Position that the popup should appear
inline false If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preserve false Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
on hover Event used to trigger popup. Can be either focus, click, hover, or manual. Manul popups must be triggered with $('.element').popup('show');
delay
delay: { show: 50, hide: 0 }
Delay in milliseconds before showing or hiding a popup on hover or focus
transition slide down Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration 250 Duration of animation events
closable true When using on: 'click' specifies whether clicking the page should close the popup
target false If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway 0 Offset for distance of popup from element
offset 0 Offset in pixels from calculated position
maxSearchDepth 10 Number of iterations before giving up search for popup position when a popup cannot fit on screen

Content Settings
Settings to specify popup contents

Setting Description
variation Popup variation to use, can use multiple variations with a space delimiter
content Content to display
title Title to display alongside content
html HTML content to display instead of preformatted title and content

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace popup Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { popup : '.ui.popup' }
DOM Selectors used internally
metadata
metadata: { content : 'content', html : 'html', offset : 'offset', position : 'position', title : 'title', variation : 'variation' }
HTML Data attributes used to store data
className
className : { loading : 'loading', popup : 'ui popup', position : 'top left center bottom right', visible : 'visible' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Popup Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
error: { content : 'Your popup has no content specified', method : 'The method you called is not defined.', recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.' }