pgill pgill - 3 months ago 51
jQuery Question

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 hoverable it works but i need a clickable



<!DOCTYPE html>
<html>
<head>
<script src="jq.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 ">Clickable</a>
<div class="dropdown-content" id="drop-list">
<a href="#">Tip1</a>
<a href="#">Tip2</a>
<a href="#">Tip3</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");});});

Answer

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>

Comments