语义 UI 弹出位置较远

Semantic UI popup position far off

我正在尝试使用语义 UI 的弹出模块，但它在我的项目中的定位方面从未像在演示中那样正常工作。我尝试了一些技巧（将位置设置为 relative 等）但没有成功；这是一个fiddle： http://jsfiddle.net/smt94eox/ 我打算在按钮悬停时在按钮的左上角显示弹出窗口：

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

但是悬停时，弹出窗口显示在页面底部。 任何人都知道为什么以及如何解决这个问题？

根据docs

您不需要 inline 选项

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

如果删除内联选项并确保弹出窗口有 space，它将正确显示。 http://jsfiddle.net/smt94eox/1/

HTML - 只需使用 "margin" 为弹出

创建一些 space 
<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'
});