JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<p> <input class='hidden' id="age"  /> <a href=# class="fireTip">Click me ya bastard</a></p>

<div class="myPopover hidden">
    <h3>Hi Sten this is the div</h3>
    <ul>
        <li class="mmLink first">
            <a href="http://www.t-mobile.nl/mobiel-abonnement"><span>Abonnement</span></a>
        </li>
        <li class="mmLink active">
            <a href="/eca/mcsmambo.p"><span>Telefoons</span></a>
        </li>
        <li class="mmLink">
            <a href="/eca/RAPRL/Alle-tablets/1021.html"><span>Prepaid</span></a>
        </li>
        <li class="mmLink">
            <a href="/eca/RAPRL/Internet/1030.html"><span>Internet</span></a>
        </li>
        <li class="mmLink">
            <a href="http://www.t-mobile.nl/service-en-contact"><span>Service & Contact</span></a>
        </li>
        <li class="mmLink">
            <a href="http://www.t-mobile.nl/my-t-mobile"><span>My T-Mobile</span></a>
        </li>
        <li class="mmLink">
            <a href="https://blog.t-mobile.nl/"><span>Nieuws</span></a>
        </li>
    </ul>
</div>



</body>

CSS

.ui-widget {
            border: 1px solid black;

        }

        .ui-tooltip, .arrow:after {
            background: white;
            border: 1px solid white;
        }
        .ui-tooltip {
            padding: 10px 20px;
            color: black;
            border-radius: 2px;
            font: bold 14px "Helvetica Neue", Sans-Serif;
            text-transform: uppercase;
            box-shadow: 0 0 1px black;
            border: 1px solid white !important;
        }
        .arrow {
            width: 70px;
            height: 16px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: -17px;
        }
        .arrow.top {
            top: -17px;
            bottom: auto;
        }
        .arrow.left {
            left: 20%;
        }
        .arrow:after {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 0 0 1px black;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
        .hidden {
            visibility: hidden;
        }

        .fireTip {
            margin-left: -150px;
        }

        p {
            margin: 200px;
        }

JavaScript

$(function() {
            $( document ).tooltip({
                items: "input",
                content: function() {
                    return $('.myPopover').html();
                },
                position: {
                    my: "center bottom-20",
                    at: "center top",
                    using: function( position, feedback ) {
                        $( this ).css( position );
                        $( "<div>" )
                                .addClass( "arrow" )
                                .addClass( feedback.vertical )
                                .addClass( feedback.horizontal )
                                .appendTo( this );
                    }
                }
            });

            $('.fireTip').click(function () {
                if(!$(this).hasClass('open')) {
                    $('#age').trigger('mouseover');
                    $(this).addClass('open');
                } else {
                    $('#age').trigger('mouseout');
                    $(this).removeClass('open');
                }

            })

        });