Tooltip Password Help Icon Using Jquery

<p style="margin-top:100px;">
    Password help icon tooltip.<span class="question">?</span>
</p>
<style>
span.question {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background-color: #89A4CC;
line-height: 16px;
color: White;
font-size: 13px;
font-weight: bold;
border-radius: 8px;
text-align: center;
position: relative;
}
span.question:hover { background-color: #3D6199; }
div.tooltip {
background-color: #3D6199;
color: White;
position: absolute;
left: 25px;
top: -25px;
z-index: 1000000;
width: 250px;
border-radius: 5px;
}
div.tooltip:before {
border-color: transparent #3D6199 transparent transparent;
border-right: 6px solid #3D6199;
border-style: solid;
border-width: 6px 6px 6px 0px;
content: "";
display: block;
height: 0;
width: 0;
line-height: 0;
position: absolute;
top: 40%;
left: -6px;
}
div.tooltip p {
margin: 10px;
color: White;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("span.question").hover(function () {
$(this).append('<div class="tooltip"><p>Password must be 8-20 characters including 
one uppercase letter, one special character and alphanumeric characters.</p></div>');
}, function () {
$("div.tooltip").remove();
});
});
</script>
Output
1. Tooltip icon using Jquery
2.Tooltip icon using Jquery
Advertisements
Categories: General | Tags: , , , , | Leave a comment

Post navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: