Tooltip Password Help Icon Using Jquery

<p style="margin-top:100px;">
    Password help icon tooltip.<span class="question">?</span>
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;
<script src=""></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 () {
1. Tooltip icon using Jquery
2.Tooltip icon using Jquery
Categories: General | Tags: , , , , | Leave a comment

Post navigation

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

Create a free website or blog at

%d bloggers like this: