Jquery Very Simple Tooltip

Today, i am representing my own build jquery tooltip, it is very easy to use and build on very simple logic so that you can further modify its code. use it in your project for free, if you like it or have any suggestions / comments , or you have some idea to make it better, or you need some more fetures in it then pls just drop a comment in the same post.

Download : jQuery Tooltip Plugin

DEMO : Using separate div tag.
How to use

1) include jquery, and tooltip.jquery.js files in your web page.

2) Javascript

Avilable Options with default values

To use multiple option you need to seprate every option from ",".
width : auto, //Tooltip width

height: auto, //Tooltip height

offsetX: 15, //X Offset value

offsetY: 10, //Y Offset value

fadeIn : '200', //Tooltip fadeIn speed, can use, slow, fast, number

fadeOut : '200',//Tooltip fadeOut speed, can use, slow, fast, number

dataAttr : 'data', //Used when we create seprate div to hold your tooltip data, so plugin search div tage by using id 'data' and current href id on whome the mouse pointer is so if your href id is '_tooltip_1' then the div which hold that tooltips content should have id 'data_tooltip_1', if you change dataAttr from default then you need to build div tag with id 'current dataAttr _tooltip_1' without space

bordercolor: '#6CE26C', // tooltip border color

bgcolor: '#F8F8F8', //Tooltip background color

fontcolor : '#006699', //Tooltip Font color

fontsize : '15px', // Tooltip font size

folderurl : 'NULL', // Folder url, where the tooltip's content file is placed, needed with forward slash in the last (/), or can be use as http://www.youwebsitename.com/foldername/ also.

filetype: 'txt' // tooltip's content files type, can be use html, txt

3) Tooltip
<a id="tooltip_from_div" href="javascript;" class="tooltip">Tooltip with Hidden Div Tag</a>

4) Tooltip data div
<div id="data_tooltip_from_div" style="display:none;">this is developed by hidden div.</div>
whats important in that
the div tag which store the tooltip data should have id the in the following manner
'data' + '_the id on which the tooltip develop'
In above example the id of tooltip is 'tooltip_from_div' then the id of div which store that tooltips data will be 'data_tooltip_from_div'.

Finish

DEMO : Without using static file.

How to use

1) include jquery, and tooltip.jquery.js files in your web page.

2) Javascript

3) HTML
<a id="This tooltip is developed by using this html tags id attribute" href="javascript;" class="tooltip">Tooltip without static file</a>

Finish

DEMO : Using static file

How to use

1) include jquery, and tooltip.jquery.js files in your web page.

2) Javascript

Avilable Options with default values

To use multiple option you need to seprate every option from ",".
offsetX: 15, //X Offset value
offsetY: 10, //Y Offset value
bordercolor: '#000000', // tooltip border color
bgcolor: '#F7F6F0', //Tooltip background color
fontcolor : '#000000', //Tooltip Font color
fontsize : '15px', // Tooltip font size
folderurl : 'NULL', // Folder url, where the tooltip's content file is placed, needed with forward slash in the last (/), or can be use as http://www.youwebsitename.com/foldername/ also.
filetype: 'txt' // tooltip's content files type, can be use html, txt


3) HTML
<a id="tooltip_1" href="javascript:;" class="tooltip">Testing no 1 </a>

4) Tooltip Contents

now you need to write content which will be shown mouse hover on above link, the plugin search the file which is mentioned in "id" attribute of link (currently 'tooltip_1') in the specified folder location (javascript: 'folderurl'), by default the file extention is txt, so the file name will become like this contents/tooltip_1.txt

Finish

Downloads