Semantic UI sandbox

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>

<div class="ui container">
  <one>
    <div class="ui button">Button</div>
  </one>
  <two>
    <div class="ui popup">
      <h4 class="ui header">
        Test
      </h4>
      <p>Wee this is how it goes I only need a few words to get the popup to show, not that it matters what the words are wee.</p>
    </div>
  </two>
</div>

CSS

body {
    padding: 1em;
}

one {
  display: block;
  position: relative;
  padding: 50px 100px;
  background-color: #F0F0F0;
}
two {
  display: block;
  background-color: #EEE;
  position: relative;
  top: 100px;
  padding: 50px 8px;
}

JavaScript

$('one .button').popup({
  on: 'hover',
  position: 'top right',
  movePopup: false,
  popup: $('two .popup')
})