Semantic UI中使用popup没生效的解决方法

MatthewLZY

于 2020-07-20 23:58:02 发布

阅读量2w

点赞数 3

文章标签： html jquery ui

本文链接：https://blog.csdn.net/weixin_40176862/article/details/107477796

版权

在使用SemanticUI的Popup组件时，若鼠标悬停或点击按钮无法显示弹框，问题可能在于jQuery和SemanticUI JS文件的加载顺序。正确做法是在引入SemanticUI前先加载jQuery，确保组件正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Semantic UI时，想要做出类似下图的效果（鼠标移至按钮或者点击按钮会有下面的弹框）
在这里插入图片描述
这时候出大问题，检查代码无误，但就是不生效，没法显示这种弹框效果。

最后发现问题出在引入jquery.min.js和semantic.min.js的顺序上。因为使用Semantic UI的一些组件需要用到jQuery，所以必须在semantic.min.js之前引入jquery.min.js，调换顺序后popup生效。

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>