Product Name

Popup

CSS or JS?

Popup includes both a javascript version (with a full featureset) and a limited CSS only version, which can be useful in pages that use many popups, or with libraries like React or Meteor to avoid handling DOM lifecycle. If you want a simple 'tooltip' a CSS-only popup is probably perfect for your needs. For more complex popups like the warning popup, JS will be required.

CSS Popups

Css-only tooltips use an element's :before and :after pseudo classes. Elements like icon that already use these classes for styling will need to have the tooltips on a wrapping element, like a button, or a span to make sure tooltips work correctly.

Basic implementation

Standard:

inverted:

Show Code 
<div class="ui icon button" data-tooltip="Add users to your feed">
  <i class="add icon"></i>
</div>
<div class="ui icon button" data-tooltip="Add users to your feed" data-inverted="">
  <i class="add icon"></i>
</div>

Css-only popup Positioning

Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center
Show Code 
  <div class="ui button" data-tooltip="Add users to your feed" data-position="top left">
    Top Left
  </div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="top center">
    Top Center
  </div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="top right">
    Top Right
  </div>
  <div class="ui divider"></div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="bottom left">
    Bottom Left
  </div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="bottom center">
    Bottom Center
  </div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="bottom right">
    Bottom Right
  </div>
  <div class="ui divider"></div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="right center">
    Right Center
  </div>
  <div class="ui button" data-tooltip="Add users to your feed" data-position="left center">
    Left Center
  </div>

Javascript Popups

Basic implementation

Popup:

COMING SOON

JS HTML Popups

Broken Integration
It seems like your integration is not properly setup or the one integrated is broken. You can fix this by going into the Broadcast Overview>Broadcast Setting> Overview.
Bad SMTP: Step 1
You can fix this error by going into your SMTP settings and correcting the error in step one.
Show Code 
<div class="ui icon button" id="jsTriggerOne">
  <i class="red exclamation triangle icon"></i>
</div>

<div class="ui special error popup">
  <div class="content">
    <div class="red bold text header"><i class="red puzzle piece icon"></i> Broken Integration</div>
    It seems like your integration is not properly setup or the one integrated is broken. You can fix this by going into the Broadcast Overview>Broadcast Setting> Overview. 
  </div>
  <div class="content">
    <div class="red bold text header"><i class="red telegram plane icon"></i> Bad SMTP: Step 1</div>
    You can fix this error by going into your SMTP settings and correcting the error in step one. 
  </div>
</div>

<script>
  $("#jsTriggerOne").popup();
</script>

NOTE: for more basic variations, visit the Semantic UI documentation