Question

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

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链接https://jsfiddle.net/ynaLoe4z/1/

Answer 1

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

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

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

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

Answer 2

你在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

语义UI弹出窗口未显示

2 个答案: