An element can specify popup content to appear.
<sm-button class="icon" sm-popup="'Add users to your feed'"><i class="add icon"></i></sm-button>
An element can specify popup content with a title.
<img src="http://semantic-ui.com/images/avatar/small/elliot.jpg" sm-popup-title="'Elliot Fu'" sm-popup="'Elliot has been a member since July 2012'" class="ui avatar image">
An element can display a popup that is already included in the page.
<div class="ui card" sm-popup-inline=""> <div class="image"> <img src="http://semantic-ui.com/images/movies/watchmen-horizontal.jpg"> </div> <div class="content"> <div class="header">Watchmen</div> <div class="description"> In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated. </div> </div> <div class="ui two bottom attached buttons"> <div class="ui button"><i class="add icon"></i>Queue</div> <div class="ui primary button"><i class="play icon"></i>Watch</div> </div> </div> <sm-popup-detached> <div class="header">User Rating</div> <sm-rating total="5" model="3" type="star"></sm-rating> </sm-popup-detached>
A popup can provide more basic formatting.
<sm-button class="icon" sm-popup="'The default theme\'s basic popup removes the pointing arrow.'" sm-popup-variation="basic"> <i class="add icon"></i> </sm-button>
A popup can be extra wide to allow for longer content.
<i class="circular heart icon link" sm-popup="'Hello. This is a wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide.'" sm-popup-variation="wide"></i> <i class="circular heart icon link" sm-popup="'Hello. This is a very wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide.'" sm-popup-variation="very wide"></i>
A fluid popup will take up the entire width of its offset container.
<sm-button sm-popup-inline="">Show fluid popup</sm-button> <sm-popup-detached class="fluid top left transition hidden"> <div class="ui four column divided center aligned grid"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div> </sm-popup-detached>
A popup can vary in size.
<i class="circular heart icon link" sm-popup="'Hello. This is a mini popup'" sm-popup-variation="mini"></i> <i class="circular heart icon link" sm-popup="'Hello. This is a tiny popup'" sm-popup-variation="tiny"></i> <i class="circular heart icon link" sm-popup="'Hello. This is a small popup'" sm-popup-variation="small"></i> <i class="circular heart icon link" sm-popup="'Hello. This is a large popup'" sm-popup-variation="large"></i> <i class="circular heart icon link" sm-popup="'Hello. This is a huge popup'" sm-popup-variation="huge"></i>
A popup can have no maximum width and continue to flow to fit its content.
<sm-button sm-popup-inline="{hoverable: true}">Show flowing popup</sm-button> <sm-popup-detached class="flowing top left transition hidden"> <div class="ui three column divided center aligned grid"> <div class="column"> <h4 class="ui header">Basic Plan</h4> <p><b>2</b> projects, $10 a month</p> <div class="ui button">Choose</div> </div> <div class="column"> <h4 class="ui header">Business Plan</h4> <p><b>5</b> projects, $20 a month</p> <div class="ui button">Choose</div> </div> <div class="column"> <h4 class="ui header">Premium Plan</h4> <p><b>8</b> projects, $25 a month</p> <div class="ui button">Choose</div> </div> </div> </sm-popup-detached>
A popup can have its colors inverted.
<i class="circular heart icon link" sm-popup="'Hello. This is an inverted popup'" sm-popup-variation="inverted"></i>
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.
<div class="ui menu"> <a class="browse item" sm-popup-inline="{hoverable: true}"> Browse <i class="dropdown icon"></i> </a> <sm-popup-detached class="fluid bottom left transition hidden" style="top: 554px; left: 1px; bottom: auto; right: auto; width: 960px;"> <div class="ui four column relaxed divided grid"> <div class="column"> <h4 class="ui header">Fabrics</h4> <div class="ui link list"> <a class="item">Cashmere</a> <a class="item">Linen</a> <a class="item">Cotton</a> <a class="item">Viscose</a> </div> </div> <div class="column"> <h4 class="ui header">Size</h4> <div class="ui link list"> <a class="item">Small</a> <a class="item">Medium</a> <a class="item">Large</a> <a class="item">Plus Sizes</a> </div> </div> <div class="column"> <h4 class="ui header">Colors</h4> <div class="ui link list"> <a class="item">Neutrals</a> <a class="item">Brights</a> <a class="item">Pastels</a> </div> </div> <div class="column"> <h4 class="ui header">Types</h4> <div class="ui link list"> <a class="item">Knitwear</a> <a class="item">Outerwear</a> <a class="item">Pants</a> <a class="item">Shoes</a> </div> </div> </div> </sm-popup-detached> <a class="item"> <i class="cart icon"></i> Checkout </a> </div>
A popup trigger event can be specified.
<sm-button class="teal" sm-popup-inline="{on:'click'}">Show custom popup</sm-button> <sm-popup-detached class="top left transition hidden"> You click, I show. </sm-popup-detached>
A popup can specify a different target element than itself to show a popup.
<sm-button class="teal" sm-popup="'My favorite dog would like other dogs as much as themselves'" sm-popup-title="'My favorite dog'" sm-popup-settings="{position: 'right center', target: '.test.image'}">Hover Me</sm-button> <div class="ui divider"></div> <img class="medium ui test image" src="http://semantic-ui.com/images/wireframe/image.png">
A popup can either be inserted directly after an element, or added as a child element to the page's body.
<i class="heart circular icon link" sm-popup-display="popupC"></i> <sm-popup-detached name="popupC" class="top left transition hidden"> <div class="content">This popup was inserted inline and will be styled</div> </sm-popup-detached>
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.
<div class="ui segment"> <i class="square inverted red heart icon link" sm-popup="'Top Left'" sm-popup-position="top left"></i> <i class="square inverted red heart icon link" sm-popup="'Top Center'" sm-popup-position="top center"></i> <i class="square inverted red heart icon link" sm-popup="'Top Right'" sm-popup-position="top right"></i> <i class="square inverted red heart icon link" sm-popup="'Right Center'" sm-popup-position="right center"></i> <i class="square inverted red heart icon link" sm-popup="'Bottom Right'" sm-popup-position="bottom right"></i> <i class="square inverted red heart icon link" sm-popup="'Bottom Center'" sm-popup-position="bottom center"></i> <i class="square inverted red heart icon link" sm-popup="'Bottom Left'" sm-popup-position="bottom left"></i> <i class="square inverted red heart icon link" sm-popup="'Left Center'" sm-popup-position="left center"></i> </div>
A popup can use any named ui transition.
<i class="large demo home circular link icon" sm-popup="'The place where you keep your dog'" sm-popup-title="'Home'" sm-popup-settings="{transition: popupTransition}"></i> <div class="ui divider"></div> <sm-dropdown class="selection" model="popupTransition" items="transitions" value="item" label="item" sm-popup-show="{$:'.demo.home.icon', evt:'change'}"></sm-dropdown>