Why does the nag onHidden Callback not fire?

Question

I try to use the onHidden callback handler of Fomantic's nag element but regardless of what I try, I do not see the alert. What is wrong?

function showNag() {
  $(".ui.nag").nag({
    persist: true,
    onHidden: function (x) {
      alert('closed');
    },
    storageMethod: "sessionstorage"
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/semantic.min.js"></script>


<div class="ui nag">
  <div class="title">Welcome to the nag module</div>
  <div>Some additional Info here</div>
  <i class="close icon"></i>
</div>

<div class="ui container">
  <h1 class="ui header">Sandbox</h1>
  <div class="ui segment">
    <button type="button" class="ui button" onClick="showNag()">Nag</button>
  </div>
</div>

Answer 1

It turned out that this feature was apparently added in a later version, updating to the current version of Fomantic fixes this issue:

https://codepen.io/thothal/pen/gOqwgRm

function showNag() {
  // Show the Nag element
  $(".ui.nag").nag({
    persist: true,
    onHidden: function () {
      alert("closed");
    },
    storageMethod: "sessionstorage"
  });
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>


<div class="ui container">
  <h1 class="ui header">Sandbox</h1>
  <div class="ui segment">
    <div class="ui nag">
      <div class="title">Welcome to the nag module</div>
      <div>Some additional Info here</div>
      <i class="close icon"></i>
    </div>

    <button type="button" class="ui button" onClick="showNag()">Nag</button>
  </div>
</div>