tool tip popup Javascript

<script type=”text/javascript”>
$(function ($) {
$(“.tooltip_trigger”).hover(function () {
$(this).next(“.tooltip_table”).css(“display”, “inline”);
}, function () {
$(this).next(“.tooltip_table”).css(“display”, “none”);
});
});
</script>
<style type=”text/css”>
.tooltip_table {
position: absolute;
display: none;
top: -8px;
margin-left: 5px;
}

.tooltip_table td {
padding: 0;
}

.tooltip_content {
background-color: #F4F4F3;
vertical-align: middle;
}

.tooltip_r1_c1 {
background-image: url(“/images/tooltip_r1_c1.gif”);
height: 7px;
width: 11px;
}

.tooltip_r1_c2 {
background-image: url(“/images/tooltip_r1_c2.gif”);
background-repeat: repeat-x;
height: 7px;
}

.tooltip_r1_c4 {
background-image: url(“/images/tooltip_r1_c4.gif”);
height: 7px;
width: 8px;
}

.tooltip_r2_c1 {
background-image: url(“/images/tooltip_r2_c1.gif”);
background-repeat: repeat-y;
vertical-align: middle !important;
width: 11px;
}

.tooltip_r2_c4 {
background-image: url(“/images/tooltip_r2_c4.gif”);
background-repeat: repeat-y;
vertical-align: middle !important;
width: 8px;
}

.tooltip_r5_c1 {
background-image: url(“/images/tooltip_r5_c1.gif”);
height: 7px;
width: 11px;
}

.tooltip_r5_c2 {
background-image: url(“/images/tooltip_r5_c2.gif”);
background-repeat: repeat-x;
height: 7px;
}

.tooltip_r5_c4 {
background-image: url(“/images/tooltip_r5_c4.gif”);
height: 7px;
width: 8px;
}

.tooltip_trigger {
cursor: pointer;
display: inline;
/*float: left;*/
}
</style>

<div style=”position: relative;” id=”header5″>
<h2>Hover Link </h2>
<table cellspacing=”0″>
<tbody>
<tr>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
</tr>
<tr>
<td>
<img src=”/images/tooltip_r3_c1.gif” alt=”” /></td>
<td><span id=”lblHelpText”>Click me</span></td>
<td></td>
</tr>
<tr>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
<td><img alt=”” src=”/images/none.gif”></td>
</tr>
</tbody>
</table>
</div>

Images:

tooltip_r1_c4 tooltip_r2_c1 tooltip_r2_c4 tooltip_r3_c1 tooltip_r3_c4 tooltip_r5_c1 tooltip_r5_c2 tooltip_r5_c4 none tooltip_r1_c1 tooltip_r1_c2

Advertisements

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