Question

请查看片段（您需要将鼠标悬停在按钮上）。

当按钮具有工具提示时，加载工作很奇怪。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/>

<h3 class="ui header">Does not work as expected</h3>
<button class="ui icon loading button" data-tooltip="tooltip"><i class="settings icon"></i></button>

<h3 class="ui header">Works because without tooltip</h3>
<button class="ui icon loading button"><i class="settings icon"></i></button>

Answer 1

这是因为工具提示和加载都使用:before和:after样式，因此它们会相互干扰。

您可以通过将按钮包装在span

中来解决此问题

<span data-tooltip="tooltip" data-position="right center">
  <button class="ui icon loading button">
    <i class="settings icon"></i>
  </button>
</span>

https://jsfiddle.net/4uzroqjg/

带有工具提示的语义UI按钮加载状态

1 个答案: