语义 UI 弹出窗口不显示

Question

使用语义作为前端并尝试使用弹出窗口，但不会显示弹出窗口

HTML

<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
    <div class="ui icon input">
      <input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
    <i class="search icon"></i>
</div>

Javascript

<script type="application/javascript">
    $('.example .teal.button')
   .popup({
    on: 'click'
  })
;
$('.example input')
  .popup({
    on: 'focus'
  })
;
</script>

这是 jsfiddle link https://jsfiddle.net/ynaLoe4z/1/

Answer 1

您在 jQuery 中使用了错误的选择器。从选择器中删除 .example，它就像一个 cham。

    $('.teal.button')
      .popup({
        on: 'click'
      });
    $('input')
      .popup({
        on: 'focus'
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
<div class="ui icon input">
  <input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
  <i class="search icon"></i>
</div>

这是固定的jsFiddle

Answer 2

自 semantic-ui 2.2 以来，有 css-only 弹出窗口可用。

<div data-tooltip="Add your text here"></div>

您还可以包含其他属性，例如 data-variation="mini" 来更改大小。

http://semantic-ui.com/introduction/new.html

语义 UI 弹出窗口不显示

Semantic UI Popup does not show

jquery

semantic-ui