Content
UI Module: Popup
6 of 10
1. Accordion
2. Checkbox
3. Dimmer
4. Dropdown
5. Modal
6. Popup
7. Rating
8. Shape
9. Sidebar
10. Transition
Menu

Popup

A popup displays additional information on top of a page element

Learn about Modules
Definition Examples Usage Settings
Definition Examples Usage Settings
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

Size

A popup can be large or small

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

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

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 : 'top right', 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 or hover
delay 150 Delay in milliseconds before showing a popup when using hover or focus events.
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

Callbacks
Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onCreate Popup Is called after a popup is created
onRemove Popup Is called after a popup is removed from the page
onShow Element Is called after a popup is shown.
onHide Element Is called after a popup is hidden.

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.' }