Home > jQuery > Jquery Very Simple Tooltip Plugin, Ajax Enabled

Jquery Very Simple Tooltip Plugin, Ajax Enabled


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

Version 3.0 : Now use separate div tag to store tooltip data on same page.

DEMO : Using separate div tag.

How to use

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

2) Javascript

$(document).ready(function(){
$('.tooltip').tooltip();
});

Avilable Options with default values

To use multiple option you need to seprate every option from “,”.

Options Default Value Type
cursor help Optional
width auto Optional
height auto Optional
folderurl NULL Optional
offsetX 15 Optional
offsetY 10 Optional
fadeIn 200 Optional
fadeOut 200 Optional
dataAttr ‘data’ Optional
bordercolor #000000 Optional
bgcolor #F7F6F0 Optional
fontcolor #000000 Optional
fontsize 15px Optional
filetype txt Optional

3) Tooltip

<a id="tooltip_from_div" href="javascript;" class="tooltip">Tooltip without
static file</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

Now Version 1.1 Realsed : No need to create static file to store tooltip notification data.

DEMO : Without using static file.


How to use

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

2) Javascript

$(document).ready(function(){
$('.tooltip').tooltip();
});

3) HTML

<a id="This tooltip is developed by using this html tags id attribute
>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

$(document).ready(function(){
$('.tooltip').tooltip({
folderurl : 'contents/'
});
});

3) HTML

<a id="tooltip_1" href=";">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

Advertisements
  1. ian
    February 6, 2010 at 4:06 am

    Great little plug-in, thanks for making this!
    I made a few changes I thought I would share:

    I added a simple fade effect by replacing the display : none/block code with the following:
    $(dialog_id).stop(true, true).fadeIn(200);
    $(dialog_id).stop(true, true).fadeOut(200);

    I moved the code that makes the tooltip div above the “each” function so that it only creates one element. Only one gets used and having multiple items with the same id isn’t good, so it just makes one.

    I removed all the css settings from the mousemove function except top and left, because there’s no need to reset them when they aren’t changing.

    The ‘hover’ function doesn’t work for image maps in IE6, so I used ‘mouseover’ and ‘mouseout’ instead.

    I am also getting the tooltip text from the ‘alt’ tag instead of the id, because I needed to use the id and some of my tooltips have the same text.

    Thanks again!

    • intekhabrizvi
      February 8, 2010 at 10:17 am

      Hi Ian,
      Thanks for giving me details, code is now update and ready to download, And regarding your “I am also getting the tooltip text from the ‘alt’ tag instead of the id, because I needed to use the id and some of my tooltips have the same text.”
      if i enable alt tag then your document will not be valid as per W3C rule because HTML A tag doesn’t have alt tag, insist of that i now implemented the another div section which hold your tooltip data, for more details checkout the latest version of tooltip.
      thanks again

  2. Max
    February 8, 2010 at 12:17 am

    Hi Intekhab,

    I just submitted this in google-code site. Sending it here as well just in case with some added note.

    First of all, congratulations for the great work. I am trying to use your
    cool yet simple tooltip in one of my site. But, I am facing some issues
    when a tooltip is too close to the right-edge of the document window (screen).

    To replicate the problem:

    1. Just add a tooltip link near to the right-edge of the window (screen).
    The tooltip window (dialog window) is either squizzed to a very narrow one
    or totally (or partially) visible (depending on the space available on the
    right-side of the screen).

    2. Perhaps add some internal support so that the dialog window flips to the
    left-side in these cases where the tooltip is too close to the right-edge
    and there is not enough room to show the full dialog.

    3. Another, but not so important issue is that the tooltip dialog window is not rounded in IE. It is rounded in FF. In IE it appears as a rectangle box but not rounded.

    Hope you can look at the issues and suggest a fix.

    Great Work !

    Max

    • intekhabrizvi
      February 8, 2010 at 11:35 am

      Hi Max,

      Thanks for pointing out the issue, the patch is now ready and you can download the new version of tooltip. and regarding rounded border in IE, their is some issue with IE browser which are currently not css 3.0 compliant and i am using css 3.0 border radius property. that’s why IE dont make rounded border, right now Microsoft may be working on to fix this issue. if not then i will make some image related solution for it.

      and this project is already hosted on Google Code and for more info about CSS 3.0.

      Thanks Again

      • Max
        February 8, 2010 at 9:29 pm

        Hi Intekhab,

        Thank you for the update. Yes, things are much better now. Great work !

        While playing with it, I was wondering whetehr these things can be done. I think they will make it probably the best tooltip available out there. I am listing the suggestions ordered by priority.

        1. Most Important !!

        – If possible, please add a small time ‘delay’ as an OPTION so that the tooltip does NOT trigger instantly when the mouse is just being hovered over the link by accident or unintertionally.

        2. Highly Desirable !

        – Option to show the tooltip dialog window at a fixed ‘offsetX’ and ‘offsetY’ position which won’t change “OnMouseMove”. The idea is that the dialog window always appear at the same position without following the cursor even when the mouse is moved. Making this an OPTION will really help many people; at least me for sure.

        3. If Possible !

        – Option to control the Max-Width of the dialog window. Lets say if the dialog window width is > 250px limit the width to 250px. At the moment the tooltips often stretch the entire window depending on the amount of text being shown there.

        And again, thank you for your quick action on the previous request.

        All teh best !

        Max

  3. intekhabrizvi
    February 9, 2010 at 10:57 am

    Hi Max,

    Thanks for your suggestions. and here is some inputs from my side.

    1) Their is a option called ‘fadeIn’ & ‘fadeOut’ (case sensitive), which handle your requested features. by default its run on 200 milliseconds.you can overwrite with any value in your script as follows:

    $(document).ready(function(){
    $('.tooltip').tooltip({ fadeIn : '500', fadeOut: '500' });
    });

    Where ‘fadeIn’ handle the delay time to show tooltip when mouse over on link and ‘fadeOut’ handle the delay time to hide tooltip when mouse out from the link.

    2) Their is an option called ‘offsetX’ & ‘offsetY’ (case sensitive) which keep apart tooltip from mouse pointer by default run at 15px & 10px accordingly. you can overwrite the value as mentioned above method. (don’t enter word ‘px’ with numerical value, just type numerical value without word ‘px’.)

    3) Feature is now ready and downloadable, now use ‘width’ & ‘height’ option to limit your tooltip, by default run at ‘auto’, ‘auto’ value. used same as above mentioned method.

    Checkout the example page available in downloadable tooltip plugin.

    Thanks again
    Intekhab A Rizvi

  4. neo
    March 17, 2010 at 11:13 pm

    Hi Intekhab,

    Thanks so much for sharing your work. I am hoping to use it on something, but since I am not really an engineer, I don’t see how to make a desired modification. I’d like to point to a static file for the data, which would be a master glossary containing the data for all the tooltips. If this is possible, it would a fabulous addition in functionality. In my case, might be be XML formatted, something like the below, but any way of doing it would be great:

    blah-blah
    What humans say most of the time.

    blah-blah-blah
    More nonsense than before.

    Thanks for your thoughts,
    Neo

  5. neo
    March 17, 2010 at 11:25 pm

    Apologies for the clobbered code in the previous post. It should have looked like this:

    <glossary>
        <entry>
            <term>blah-blah</term>
            <definition>What humans say most of the time.</definition>
        </entry>
        <entry>
            <term>blah-blah-blah</term>
            <definition>More nonsense than before.</definition>
        </entry>
    </glossary>

    cheers,
    neo

  6. chris
    March 23, 2010 at 11:45 pm

    Any chance I can change the default cursor that get’s used – with options instead of hard coding the js?

    thanks

    • intekhabrizvi
      March 24, 2010 at 10:22 am

      Yes you can, use ‘cursor’ option to set your desirable cursor.

  7. Claude
    March 27, 2010 at 4:21 am

    add a z-index option. I was wondering why i wasn’t seeing the tooltip, even though i was getting the cursor. I manually added a z-index and set it to 100 and it became visible. My page layout uses layers, so it was hidden initially.

  8. sinisa.sk
    May 10, 2010 at 7:32 pm

    I like your plugin. Is there any way to hide div element on click event (not mousemove)? I want to put link inside div and fade out increment doesn’t satisfy me 😦

  9. Giannis
    May 21, 2010 at 8:27 pm

    Is there any way to show the tooltip/s onpageload without mouse interaction?

  10. MaxDiaz
    September 24, 2010 at 1:20 am

    Hi Intekhab,

    I like your simple tooltip! However, I made a number of fixes that you may (or may not) want to incorporate:

    * 22-Sep-2010
    * Prevent spurious divToolTip being created
    * Add (optional) parameter dialogid to have CSS control of TTs
    * Remove CSS-specific parameters assigned by code, which forced to assign style attrs in js init, rather than in CSS;
    * now ignores options: bordercolor, bgcolor, fontcolor, fontsize, width, height
    * (for backward compatibility, could add them to TT element style only if present in opts)
    * 23-Sep-2010
    * Auto add defaults for #divToolTip if this is used as default and not already present; it looks in the document ,
    * if it appears in an external CSS these values will override the former

    You can find the zip, with modified example in:
    http://www.maxdiaz.com/Software/jquery.tooltip.MD.zip

    Cheers!

  11. ab
    November 1, 2010 at 1:28 am

    how to make multiple instance of this tooltip?

  12. November 12, 2010 at 1:23 pm

    Dude, your tooltip script has helped me realize my vision for a client project, and I think it adds just that much more cool to what I’m working on; enough to put it over the edge.

    Thank you for providing this light, robust, and easy to use script.
    Writing this by hand would have screwed up my deadline.

    Thank you.

  13. Mayur
    January 18, 2011 at 3:49 pm

    HI..
    this is great plugin. i used in my application.
    but there is one problem in it.

    it is working in normal html control but for .Net Control which have runat attribute is not compatible with this plugin.
    so my humble request kindly check it with .net control there is some problem in displaying tooltip using this tooltip.

    Thankyou.

  14. David
    February 23, 2011 at 4:48 pm

    Hi,

    It is not working in Chrome. Can you please check?

  15. David
    March 9, 2011 at 10:59 am

    Hi,
    This is not working in Chrome browser. Any fix for that?

    • intekhabrizvi
      March 16, 2011 at 9:26 am

      can i have crome version pls and some detail about what part of this plug-in is not working, Thanks

      • Aneliya
        October 9, 2011 at 6:49 pm

        Hi, just to let you know, that from the examples the following are not working under Chrome:
        Testing no 1
        Testing no 2
        Linux Tux Icon

        Only a very little tooltip is displayed, without any text/image in it.
        My chrome version is: 14.0.835.187 m Windows

  16. December 2, 2011 at 8:55 pm

    How would I add this to wordpress? I am using a child theme.

    Thank you 🙂

  17. January 10, 2012 at 4:36 am

    Is there a way to have all of the text in one file vs individual files?

    Here is a link to an example:
    http://www.dynamicdrive.com/dynamicindex5/speechbubblestooltip.htm

    • intekhabrizvi
      January 10, 2012 at 10:24 am

      Hello Troy,
      Their is no option for that right now, but i am going to build server-side script support in a day or two after that you can maintain all tooltip text in one server-side script file like PHP or ASP.

      • January 11, 2012 at 12:04 am

        Wow…that would be awesome! I will check back…

  18. biagio
    March 3, 2012 at 5:58 pm

    Hi, feel look good tooltip!!!
    an answer
    how update conetnt of tooltip without close and open it again???
    I try to create a popup with a into the text
    and update it with
    $(“#txt_popup” ).html(“new text”);
    but dont works
    you have to close and open it again moving the muose hover to see the new text updated

  19. March 3, 2012 at 6:05 pm

    Hi, feel look good tooltip!!!
    an answer
    how update content of tooltip without close and open it again???
    I try to create a popup with a tag span id=txt_content into the text
    and update it with
    $(“#txt_popup” ).html(“new text”);
    but dont works
    I have to close and open it again moving the muose hover to see the new text updated

  1. April 25, 2010 at 9:00 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: