语义UI弹出位置很远

时间:2015-06-01 17:27:11

标签: jquery css semantic-ui

我试图使用Semantic UI的弹出模块,它在我的项目上的定位方面从未正常工作,因为它在演示中。我尝试了几次黑客攻击(将位置设置为import Tkinter class Example(Tkinter.Frame): def __init__(self, *args, **kwargs): Tkinter.Frame.__init__(self, *args, **kwargs) self.l1 = Tkinter.Label(self, text="Enter name") self.l2 = Tkinter.Label(self, text="", width=40) self.l1.pack(side="top") self.l2.pack(side="top", fill="x") self.b1 = Tkinter.Button(root, text="Ok") self.b1.bind("<Enter>", self.on_enter) self.b1.bind("<Leave>", self.on_leave) self.b1.pack() def on_enter(self, event): self.l2.configure(text="Check details filled before pressing Ok") def on_leave(self, enter): self.l2.configure(text="") if __name__ == "__main__": root = Tkinter.Tk() Example(root).pack(side="top", fill="both", expand="true") root.mainloop() 等),但没有运气;这是一个小提琴: http://jsfiddle.net/smt94eox/ 其中我打算在按钮的左上角显示弹出窗口:

relative

但悬停时,弹出窗口会显示在页面底部。 有谁知道为什么以及如何解决这个问题?

1 个答案:

答案 0 :(得分:4)

根据docs

您不需要inline选项

  

使用设置inline:true将让Semantic知道显示   激活器之后的下一个兄弟ui popup元素。

如果删除内联选项并确保弹出窗口有空间,则会正确显示。 http://jsfiddle.net/smt94eox/1/

HTML - 只需使用&#34; margin&#34;为弹出窗口创建一些空间

<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'
});