así que estoy probando agregar una información sobre herramientas a un sitio web

 <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>

aquí está mi jsfiddle: https://jsfiddle.net/z64ndm85/

estado actual de la información sobre herramientas (imagen)

Mis preguntas:

(1) como puede ver en la imagen de arriba en este momento, mi información sobre herramientas se muestra cuando el texto "Haga clic aquí" se desplaza. Quiero cambiar esto para que la información sobre herramientas se muestre cuando se haga clic en el texto "haga clic aquí". Intenté usar "activo" en lugar de pasar el mouse, pero el problema con ese enfoque es que el cuadro de diálogo de información sobre herramientas se muestra solo mientras se hace clic en el texto. Quiero que el cuadro de diálogo se muestre de forma permanente después de hacer clic en el texto.

(2) una vez que se muestra el cuadro de diálogo de información sobre herramientas, quiero hacerlo para que el usuario pueda cerrar el cuadro de diálogo una vez que el usuario haga clic en X. Intenté ejecutar $document.tooltiptext tooltip-top.hide() cuando onclick() pero no está trabajando. ¿Cómo puedo hacer esto?

Además, ¿dónde agrego el código anterior para cerrar el cuadro de diálogo para onclick() en mi HTML? ¿Lo agrego como un?

¡¡Gracias!!