so I am testing adding a tooltip to a website

<div class="tooltip">
        <span class="price-line">click here</span>
        <div class="tooltiptext tooltip-top">
            <span class="close">
            X
            </span>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

here is my jsfiddle: https://jsfiddle.net/z64ndm85/

current state of tooltip (image)

my questions:

(1) as you can see in the image above right now my tooltip shows when "Click here" text hovers. I want to change this so that tooltip shows when the "click here" text is clicked. I tried using "active" instead of hover but the problem with that approach is the tooltip dialog shows only while the text is being clicked. I want the dialog to show permanently after the text is clicked.

(2) once the tooltip dialog is showing, I want to make it so that the user can close the dialog once the user clicks on X. I tried running $document.tooltiptext tooltip-top.hide() when onclick() but it is not working. how can I go about this?

also, where do I add the above code to close the dialog for onclick() in my HTML? do I add it as a ?

thanks!!