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

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