#5871

by Banandrew

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class="ui fluid multiple search selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
  <div class="item" data-value="af">
    <i class="af flag"></i>Afghanistan
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.ui.dropdown')
	.dropdown({
  	onLabelCreate: function (value, text) {
			let $label = $(this) 

    	$label
      	.popup({
        	content: 'I’m a popup!'
        })
        
      return $label // onLabelCreate() should always return a jQuery object with a label.
    },
    onLabelRemove: function (value) {
    	$(this).popup('destroy')
      
      return true // onLabelRemove() should always return true.
    },
  })