Lightweight jQuery Tooltip Plugin - TipTip

TipTip is a lightweight (~3.5KB minified) jQuery plugin that helps you add intelligent custom tooltips to any element of your page.  

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

How to use it:

1.  Include jQuery library and TipTip.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.tipTip.minified.js"></script>

2. Include TipTip CSS

<link href="tipTip.css" rel="stylesheet" type="text/css">

3. Markup

<a href="https://www.jqueryscript.net/" class="demo" title="jQueryScipt.Net"><strong>Free jQuery Plugins and Tutorials</strong></a>
<img src="1.jpg" width="400" height="300" alt="demo" class="demo" title="jQueryScript.Net"></p>

4. Call the plugin

<script>
$(function(){
$(".demo").tipTip();
});
</script>

5. Call the plugin with some options (Optionally)

<script>
$(function(){
  $(".someClass").tipTip({
    maxWidth: "auto", // CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
    edgeOffset: 10, // Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
    });
});
</script>

6. More Options

 

• activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
• keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
• maxWidth: string ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
• edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
• defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
• delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
• fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
• fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
• attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
• content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
• enter: callback function - Custom function that is run each time you mouseover an element with TipTip applied to it.
• exit: callback function - Custom function that is run each time you mouseout of an element with TipTip applied to it. 

 

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.