Trying to create clickable tooltip using html, css and jquery/javascript

I am trying to create a clickable tooltip using HTML, CSS and jQuery, but it is not working. I tried different option. If I make it hover-able it works but I need a clickable.

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            position: absolute;
            visibility: hidden;
            min-width: 122px;
            padding: 5px 0;
            background-color: #1F2B38;
            text-align: center;
            z-index: 1;
            top: 130%;
            left: 50%;
            margin-left: -60px;
            box-shadow: 0px 8px 16px 0px white;
            border-radius: 10px;
        }

        .dropdown-content a {
            padding: 12px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            color: #99A3A4;
            text-decoration: underline;
        }
        /*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/

        .dropdown .dropdown-content::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent white transparent;
        }
    </style>
    <li class="dropdown">
        <a href="#" class="dropmenu ">My Account</a>
        <div class="dropdown-content" id="drop-list">
            <a href="#">Profile</a>
            <a href="#">Settings</a>
            <a href="#">Log Out</a>
        </div>
    </li>
</body>
</html>

----jquery code is: ---------------------------------------

$(document).raedy(function(){$(".dropmenu").click(function(){$(".dropdown-content").show();});});

i also tried

$(document).ready(function(){$(".dropmenu").click(function(){$(".dropdown-content").attr("visibility":"visible");});});

Solution

Change like this :

1) Change .redy to ready :

$(document).ready(function(){

2) Change visibility:hidden; to display:none; in Selector ".dropdown-content "

Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).

Final code :

<!DOCTYPE html>
<html>
<head>
<script src="jq.min.js"></script>
<style>
.dropdown {position:relative;display: inline-block;}

.dropdown-content {position:absolute;display:none;min-width:122px;padding:5px 0;background-color:#1F2B38;
text-align:center;z-index:1;top:130%;left:50%;margin-left:-60px;box-shadow:   0px 8px 16px 0px white;border-radius: 10px;}

 .dropdown-content a {padding: 12px;text-decoration: none;display: block;}

 .dropdown-content a:hover {color:#99A3A4;text-decoration:underline;}

 /*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/

.dropdown .dropdown-content::after {content: "";position:   absolute;bottom:100%;left:50%;margin-left:-5px;
 border-width:10px;border-style:solid;border-color:transparent transparent  white transparent;}

</style>
    </head>
    <body>
<li class="dropdown">
<a href="#" class="dropmenu ">Clickable</a>
        <div class="dropdown-content" id="drop-list">
            <a href="#">Profile</a>
            <a href="#">Settings</a>
            <a href="#">Log Out</a>
        </div>
</li>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".dropmenu").click(function(){
                $(".dropdown-content").show();
            });
        });
    </script>
</body>
</html>