Joseph Goh Joseph Goh - 1 month ago 15
jQuery Question

Semantic UI Popup does not show

Using semantic as front end and trying to use pop, but it will not shown the pop up

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>


this is jsfiddle link https://jsfiddle.net/ynaLoe4z/1/

Answer

You using wrong selectors in jQuery. Remove .example from selectors and it work like a 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>

Here's fixed jsFiddle

Comments