Semantic UI Popup does not show

Question

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/

Solution 1

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

Solution 2

Since semantic-ui 2.2 there are css-only popups available.

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

You can also include other attributes such as data-variation="mini" to change the size.

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

Comments

[Joseph Goh]

Haha, just because wrong selector. Thank you very much. One more question where is the selector .teal.button come from.

[Gvidas]

@joseph-goh From classes class="ui teal button" dot . in selector means class as is css so if you write $('.teal.button') selector, this meands you selecting button with class teal and button

[Joseph Goh]

So if write $('.ui.teal.button') will having same result?

[Gvidas]

@joseph-goh yes, because div has all those three classes.