Semantic UI popup position far off

Question

I'm trying to use the Semantic UI's popup module and it never worked properly in terms of positioning on my project as it is on the demos. I tried a few hacks (setting position to relative etc.) but had no luck; Here is a fiddle: http://jsfiddle.net/smt94eox/ In which I intended to show popup on top left of the button as it is hovered:

$('#smile').popup({
    inline: true,
    hoverable: true, 
    position: 'top left'
});

But upon hover, the popup is shown on the bottom of the page. Anyone knows why and how to fix this?

Answer 1

According to the docs

You don't need the inline option

Using the setting inline: true will let Semantic know to display the next sibling ui popup element after the activator.

If you remove the inline option and make sure there is space for the popup, it will show correctly. http://jsfiddle.net/smt94eox/1/

HTML - Just using "margin" to create some space for the popup

<div id="smile" class="ui labeled icon button" title="You can see this" style="margin:100px">
    <i class="smile icon"></i>Click me first
</div>

JavaScript

$('#smile').popup({
    hoverable: true, 
    position: 'top left'
});