Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Awesome jQuery Tooltip plugin

Here is one awesome jQuery tooltip plugin. It's awesome, not only because it looks cool and works great, it is also fully customizable. For more information about plugin go to flowplayer.org.

You can customize tooltip outlook using css, customize it's effect and position using javascript, and you can attach them to any combination of element, class and attribute.

You can get jquery.tool file from here or download latest version from flowplayer.org

Here is a code snippet of how it works:

<script type="text/javascript" src="/jquery.tools.min.js"></script>
<!-- CSS to customize outlook -->
<style type='text/css'>
.tooltip {
    display:none;
    background: url("/frame.png");
    font-size:15px;
    height:100px;
    width:255px;
    padding:25px 25px 25px 60px;
    color:#fff; 
    font-weight: bold;
    text-align:justify;
}
</style>
<p>
    <span title='tooltip text1, tooltip text1, tooltip text1'>
        Text1, text1, text1, text1, text1
    </span>
</p>
<p>
    <span title='tooltip text2, tooltip text2, tooltip text2'>
        Text2, text2, text2, text2, text2
    </span>
</p>
<p>
    <span title='tooltip text3, tooltip text3, tooltip text3'>
        Text2, text2, text2, text2, text2
    </span>
</p>
<script type='text/javascript'>
//this one is attached to span elements with titles 
//and gets tool tip text from title attributes
$("span[title]").tooltip({
   offset: [10, 2],
   effect: 'slide',
   position: "center right"
});
</script>

And here you can test example:

Text1, text1, text1, text1, text1

Text2, text2, text2, text2, text2

Text2, text2, text2, text2, text2


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus