Popup in table not working


#1

Hi,
I am not able to get a popup working which is inside a table header. (thead). It works just fine outside.

Angular: 5.1
Angluar-Cli: 1.5.5
Semantic-UI: 2.2.14
Jquery: 3.3.1

Here is the markup:

 <table class="ui table">
        <thead>
            <tr>
                <th>
                    Title
                    <button class="ui icon button titleFilterButton">
                        <i class="icon filter"></i>
                    </button>
                    <div class="ui popup titlePopup">
                        Title Filter
                    </div>
                </th>
                <th>
                    Full Name
                    <div class="ui mini icon button filter fullNameFilterButton">
                        <i class="icon filter"></i>
                    </div>
                    <div class="ui popup fullNamePopup">
                        Full Name Filter
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Titles
                </td>
                <td>
                    Full Names
                </td>
            </tr>
        </tbody>
    </table>

Here is my init code:

 (<any>$('.titleFilterButton')).popup({
        on: 'click',
        popup: '.ui.popup.titlePopup'
      });

      (<any>$('.fullNameFilterButton')).popup({
        on: "click",
        popup: '.ui.popup.fullNamePopup',
        position: "bottom center"
      });

I’ve tried all kinds of various different configs. I’ve tried 2.2.14 and went down to 2.2.10. Same issue.

I’d appreciate any sort of pointer or help.
Thanks
–tolga