Freebies jQuery Plugins Plugins 

SONHLAB InfoTip – The Power Tooltip jQuery Plugin

SONHLAB , , , , ,

SONHLAB Infotip is a Power Tooltip jQuery Plugin with many unique and great features, easy to use and customize. This tooltip plugin can be used to display any information ( text, photos, videos, iframes … ) you like and work on almost browsers. Check the Demo for more detail.

[ga_res]

[tile_bt btstyle=”tile-bt-2 solid-orange-2 hovershadow-orange left-2 margin-10″ icon=”demo-white-circle-48″ title=”Demo”]http://demo.siterepo.com/free/sonhlab-infotips/demo.html[/tile_bt][tile_bt icon=”download-white-circle-48″ title=”Download”]http://goo.gl/DKgQB[/tile_bt][clearspace][/clearspace]

 

[free_license]

 

Browser Support:

  • Internet Explorer 6+.
  • Firefox 3.0+.
  • Chrome.
  • Safari 4.0+.
  • Opera.

 

SONHLAB InfoTip Features:

  • 12 Positions.
  • Unlimited Colors to customize.
  • Cross Browsers Compatibility ( With IE 6 arrows will be disabled ).
  • Fit both Dark and Light Templates.
  • Support AJAX Content.
  • Support Tips-in-Tips.
  • Can Stick/Unstick Tooltips.
  • Auto Show Tooltips.
  • Show Tooltips with Animation Effects.
  • Can show almost content ( images, video, iframes … ) in Tooltips.
  • Tooltip Style use CSS only, no images.
  • Easy to Use and Customize.

 

Change Logs:

Nov 17 2012: First Version ( 1.0 ).

 

Credits:

 

Table of Contents:

  1. Setup SONHLAB Infotip.
  2. Create New Tooltips.
  3. Parameters.

[ga_res]

Section 1: Setup SONHLAB InfoTip.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/sonhlab-infotips.css" type="text/css" />

Include Javascript files:

<!-- jQuery Library -->
<script type="text/javascript" src="js/jquery/jquery.min.172.js"></script>
<!-- SONHLABTooltip -->
<script type="text/javascript" src="js/sonhlab-infotips.js"></script>

Setup done.

 

Section 2: Create New InfoTips ( Tooltips ).

This section should be read along with the example file ( “demo.html” file ) also contained in the download package.

Example: We have a text “This is a demo of InfoTips.”. Now we want infotips will be shown when someone hover their mouse on the text “InfoTips”. To do this we add a <span> tag for “InfoTips” with two attributes: id and data-tooltipid.
e.g:    This is a demo of <span data-tooltipid=”info-content” id=”demo”>InfoTips</span>.

Then we create a block to contain all infotips with id=”tooltip-container”.
e.g: <div id=”tooltip-container”></div>.
The tooltip container block should be placed at bottom of the page and before </body> tag.

After create infotip container we need to prepare infotip content. Infotip content is what will show when someone hover on the text “InfoTips”.
To create it we have two ways to do that.

 

1. Inline Method:

With this way we can create content for infotips easily. Just add an content block with id is the data-tooltipid-value of <span> tag above.

Example:

<div id="tooltip-container">
	<div id="info-content" >
		<p>Hello World!!!</p>
	</div>
</div>

Now we have done creating infotip content. Finally, we use some javascript code to show the content when the text “InfoTips” is hovered.
In the <head> tag we add this code below the included javascript files.

Example:

<script type="text/javascript">
$(window).load(function() {
	$('#demo').SONHlabTooltip({
        TooltipPosition:'RightMiddle',
        TooltipStyle:'dark', 
        TooltipBackground:'#333', 
        TooltipWidth:'500',
        AutoShow:0,
        ClickableTooltip:0,
        showEffect:'off'
	});
});
</script>

 

2. AJAX Method:

With this way we need to create a new php file in “/content/sltooltips” folder with the name is the data-tooltipid value of <span> tag above to contain tooltip content.

e.g: in this case is info-content.php.

Then add content into this file. Open the info-content.php file and add: <p>Hello World!!!</p>. Then save it.

Tooltip content is done. Now we add javascript code in to <head> tag like Basic Method.

<script type="text/javascript">
$(window).load(function() {
	$('#demo').SONHlabTooltip({
        TooltipPosition:'RightMiddle',
        TooltipStyle:'dark', 
        TooltipBackground:'#333',
        TooltipWidth:'500',
        AutoShow:0,
        ClickableTooltip:0,
        Ajaxload:1, // When use Ajax Method
        showEffect:'off'
	});
});
</script>

***IMPORTANT: When use with Ajax Method you must make sure both main page  and ajax page DO NOT exist any id coincide with ajax file names.

 

Section 3: Parameters.

Parameters Properties Description
TooltipPosition string. This param is used to set Positions. We have 12 positions.
Value: RightMiddle, RightTop, RightBottom, LeftMiddle, LeftTop, LeftBottom, TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight.
TooltipStyle string. This param is used to create box shadow for tips.
Value: dark | light.
TooltipBackground string. This param is used to set background color for infotips. Can use with any color values.
Example: #E0FFFF
TooltipWidth Integer. This param is used to set width for tips.
Example: #E0FFFF
AutoShow boolean. This param is used to auto show infotips when the page is loaded.
Value: 0: default ( Disable ) | 1: Enable auto show
ClickableTooltip boolean. This param allows users can click on the element to stick or unstick infotips.
Value: 0: default ( Disable ) | 1: Enable Clickable.
Ajaxload boolean. This param is used to set which method will be used to load content.
Value: 0: default ( use Inline Method ) | 1: Use Ajax Method.
showEffect string. This param is used to set animation effects.
Value: off: no effect | fade

 

 

That’s it. I hope you enjoyed this plugin and find it useful!