MopBox : unique tip box for Blogger using Jquerry

Do you need a tip box to illustrating your words ? MopBox is what we need to create tip box .It's draggable tip box that can contain div, image , flashmovie, video, etc .
Mopbox can make two kind of tip box : one disappear when mouse out and one need to click on button to close .

Live demo here

To make tip box with Mopbox script ,go through steps below :
1, Download file Mopbox here
unzip this package ,you will see 4 files . Upload them to your hosting service .
2, Open template file ,insert these line before : </head>

<link href="your_hosting/mopTip-2.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="your_hosting/jquery-1.js"></script>
<script type="text/javascript" src="your_hosting/mopTip-2.js"></script>
<script type="text/javascript" src="your_hosting/jquery1a.js"></script>

Save template .Ok .Remember to change the red code to your file URL
Now go to Page elements and create a new HTML/Javascript widget
Paste this code into Widget content :

<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopTip({'w':150,'style':"overOut",'get':"#demo1"});
$("#demo2Btn").mopTip({'w':150,'style':"overClick",'get':"#demo2"});
});
</script>

<style type="text/css">
*{
margin: 0;
padding: 0;
}

.f14 {
font-size: 14px;
font-weight: bold;
}

.navi:link {
color: #AE0000;
text-decoration: none;
}
.navi:visited {
color: #AE0000;
text-decoration: none;
}
.navi:hover {
color: #AE0000;
text-decoration: underline;
}

#tipBox1 {
position: absolute;
left: 150px;
top: 120px;
}

#tipBox2 {
margin-top: 150px;
text-align: center;
}
</style>


<div id="tipBox2">
<a id="demo2Btn" style="cursor: default;" class="navi f14" href="#?moptip">demo2</a>
</div>

<div id="tipBox1">
<div><a id="demo1Btn" style="cursor: default;" class="navi f14" href="#?moptip">demo1</a></div>
</div>


<div style="display:none">
<div id="demo1">"overOut" txt txt txt txt txt txt txt</div>
<div id="demo2">"overClick" txt txt txt txt txt txt txt</div>
</div>

Save it . Ok ,you are done .
Now ,let's go deeper inside the code .
here is the code of words which tip box will be showed if mouse over .

<div id="tipBox2">
<a id="demo2Btn" style="cursor: default;" class="navi f14" href="#?moptip">demo2</a>
</div>

<div id="tipBox1">
<div><a id="demo1Btn" style="cursor: default;" class="navi f14" href="#?moptip">demo1</a></div>
</div>

Here is contents of tip boxes :

<div style="display:none">
<div id="demo1">"overOut" txt txt txt txt txt txt txt</div>
<div id="demo2">"overClick" txt txt txt txt txt txt txt</div>
</div>

Content of tip boxes can be text,image ,video .... anything you want .
here is the javascript code which control the appearance of tip boxes :

<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopTip({'w':150,'style':"overOut",'get':"#demo1"});
$("#demo2Btn").mopTip({'w':150,'style':"overClick",'get':"#demo2"});
});
</script>

In script above ,you will see demo1Btn and demo2Btn are id of elements which need to illustrating by tip boxes .
'w':150 is the width of tip box
overOut mean tip box will disappear when mouse out
overClick mean you have to click on X button to close tip box .
demo1 and demo2 are id of div layout which contain tip-box 's content