Состояние загрузки кнопки семантического интерфейса с всплывающей подсказкой

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/