Submit your widget
HomeTooltipsBeautiful Jquery Plugin MopTip(tooltips)

Beautiful Jquery Plugin MopTip(tooltips)

Created 13 years ago   Views 23158   downloads 5860    Author mopstudio
Beautiful Jquery Plugin MopTip(tooltips)
View DemoDownload
182
Share |

Tested and works with Safari4, Firefox3, Opera9, IE6, IE7, IE8, Google crome.

MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically. From ver 2.2, It get to be resizaable,(this option is usable for 1page content)

From about line21 of MopBox-2.2.jis, change path to images, if it's necessary . If set the html & the mopBox folder same directory, it isn't necessary to change.

Incluide necessary files to header

<head>
<link rel="stylesheet" type="text/css" href="mopBox/mopBox-2.2.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.resizable-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="mopBox/mopBox-2.2.js"></script>
</head>

 

Put the button showing MopBox to <body> & set ID(exsample:id="demoBtn"), this button can be txt, Image or DIV, anithing OK.

Put the content to <body> & set ID or Class(but has to be unique in the page). Set it "display: none" by CSS, or coment out with " ". It can be put any place in . If the content has more than one content, the slider navigation is shown automatically.
Write like the following to <head>. 
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#demoBtn").mopBox({'target':'#demo', 'w':270, 'h':240});
});
</script>
</head>
The line of schanging shape from the page bottom
Default is 200px. Change about line 49 of mopTip-2.1.jis.
var mopTipChangeY=200;

options

'w': Width of MopTip.
'h': Height of MopTip. If it isn`t set, it control automatically by each content.
'style': 'overOut' is shown by mouse over & hideen by mouse out, 'overClick' is shown mouse over & hidden by Click close button.
'get': Set showing content in MopTip.
<link rel="stylesheet" type="text/css" href="/edit_media/2010/201011/20101107/mopTip/css/common.css">
<link rel="stylesheet" type="text/css" href="/edit_media/2010/201011/20101107/mopTip/mopTip/mopTip-2.2.css">
<script type="text/javascript" src="/edit_media/2010/201011/20101107/mopTip/js/font.js"></script>
<script type="text/javascript" src="/edit_media/2010/201011/20101107/mopTip/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/edit_media/2010/201011/20101107/mopTip/mopTip/mopTip-2.2.js"></script>
<script type="text/javascript" src="/edit_media/2010/201011/20101107/mopTip/js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="/edit_media/2010/201011/20101107/mopTip/js/copy.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopTip({'w':150,'style':"overOut",'get':"#demo1"});
$("#demo2Btn").mopTip({'w':150,'style':"overClick",'get':"#demo2"});
$("#demo3Btn").mopTip({'w':150,'style':"overOut",'get':"#demo3"});
$("#demo4Btn").mopTip({'w':150,'style':"overClick",'get':"#demo4"});
$("#demo5Btn").mopTip({'w':150,'style':"overOut",'get':"#demo5"});
});
</script>
<style type="text/css">
<!--
#demo {
    top: 0px;
    width: 100%;
}
#demo .expl {
    background-color: #F8F8F2;
    margin: 0 20px 0 20px;
}
#tipBox1 {
    position: absolute;
    left: 150px;
    top: 120px;
}
#tipBox2 {
    margin-top: 150px;
}
#tipBox2case {
    height: 100px;
    width: 100%;
    top: 0px;
    left:0px;
    text-align: center;
}
#tipBox3 {
    position: absolute;
    left: 100px;
    bottom: 110px;
}
#demo3Btn {
    padding: 5px;
    width: 100px;
    margin: 0 5px 0 0;
    background-color: #AE0000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
#demo4Btn {
    padding: 5px;
    width: 100px;
    margin: 0 0 0 5px;
    background-color: #AE0000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
#tipBox4case {
    position: absolute;
    right: 120px;
    top: 180px;
}
.demo4Case {
    height: 220px;
    width: 250px;
    text-align: left;
    padding: 10px;
}
.mopTipCase {
    width: 600px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#tipBox5case {
    position: absolute;
    right: 100px;
    bottom: 150px;
}
#demo5Btn {
    width: 100px;
    padding: 30px 0 30px 0;
    background-color: #AE0000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0 0 0 5px;
}
#footerBoxForThisPage {
    position: absolute;
    bottom: 10px;
    width: 100%;
}
.setMiddle {
    vertical-align: middle;
}
.tipTxtcCase {
    height: 100%;
}
.bottomLine {
    height: 190px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #AE0000;
    right: 0px;
}
.bottomLineIn {
    padding: 3px 0 0 10px;
    color: #AE0000;
}

-->
</style>
<body>
<div id="demo">
  <div class="space20"></div>
  <div class="expl contentCenter">
    <div class="contentCenter pad10_0_10_0 18F bold">MopTip2.2Demo</div>
    <div class="normalF gray pad0_0_10_0"> | <a class="navi eng" href="#">document</a> | </div>

    <div class="check"></div>
  </div>
</div>
  <div id="tipBox2" class="contentCenter"><span class="gray eng f12">$(&quot;#demo2Btn&quot;).mopTip({'w':150,'style':&quot;overClick&quot;,'get':&quot;#demo2&quot;}); </span><a id="demo2Btn" class="navi f14 bold" href="#">demo2</a>
</div>
<div class="bottomLine f12 gray">

  <div class="bottomLineIn">bottom:200px Default vertical Line of Changing shape</div>
</div>
<div id="tipBox1">
  <div><a id="demo1Btn" class="navi f14 bold" href="#">demo1</a><span class="gray eng f12"> $(&quot;#demo1Btn&quot;).mopTip({'w':150,'style':&quot;overOut&quot;,'get':&quot;#demo1&quot;});</span></div>
</div>

<div id="tipBox3">
  <table class="f_left" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="setMiddle"><div id="demo3Btn" class="f_right f14 bold">demo3</div></td>
      <td class="setMiddle"><span class="gray eng f12">$(&quot;#demo3Btn&quot;).mopTip({'w':150,'style':&quot;overOut&quot;,'get':&quot;#demo3&quot;});</span></td>

      
    </tr>
  </table>
</div>
<div id="tipBox4case">
  <table class="f_left" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="setMiddle"><span class="gray eng f12">$(&quot;#demo4Btn&quot;).mopTip({'w':150,'style':&quot;overClick&quot;,'get':&quot;#demo4&quot;});</span></td>

      <td class="setMiddle"><div id="demo4Btn" class="f_right f14 bold">demo4</div></td>
    </tr>
  </table>
</div>
<div id="tipBox5case">
  <table class="f_left" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="pad5_0_0_0 f12 eng gray" valign="top">$(&quot;#demo5Btn&quot;).mopTip({'w':150,'style':&quot;overOut&quot;,'get':&quot;#demo5&quot;});</td>

      <td valign="middle"><div id="demo5Btn" class="f_right f14 bold">demo5</div></td>
    </tr>
  </table>
</div>
<div class="hidden">
  <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 id="demo3"><img class="f_left" src="/edit_media/2010/201011/20101107/mopTip/jpg4.jpg" />"overOut" txt txt txt txt txt txt txt</div>
  <div id="demo4"><img class="f_left" src="/edit_media/2010/201011/20101107/mopTip/jpg4.jpg" />"overClick" txt txt txt txt txt txt txt</div>
  <div id="demo5"><img class="f_left" src="/edit_media/2010/201011/20101107/mopTip/jpg4.jpg" />"overOut" txt txt txt txt txt txt txt</div>

</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<!--analytics-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
[removed](unescape("[removed][removed]"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3324600-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
 
Tag: tooltips

You might also like