Simpletip tooltip plugin

Cons jQuery Tools Tooltip, advantages SimpleTip, as well as a little about how to solve some problems of its use.


Until recently, I used a convenient and small jQuery Tools Tooltip plugin that suited me all.
And so I decided to find another because:
')
1. The text displayed in the tooltip is contained in the title attribute of the element for which the tooltip is needed. You can also pass through the tip attribute in the constructor, but you need to pass jQuery selector , and not just text. In general, not very comfortable and not very flexible;
2. After creating a hint, it is impossible to change the text and the contents of the entire hint (neither a simple change of the title attribute, nor a subsequent call to the $('#email').tooltip(); constructor $('#email').tooltip(); does not help). In general, there is no regular means, it is sad.

I decided to look for an alternative, since I just needed to update the text of the tooltip (since the interaction with the server through ajax and the page is not overloaded).

Here is such a plugin SimpleTip

Of the amenities:
1. The packaged file weighs 3.3 kb versus 3.4 for Tools Tooltip;
2. text transfer in the $('#email').simpletip({content: 'hello world'}); constructor $('#email').simpletip({content: 'hello world'}); , it is also possible to transfer html there, i.e. to display what your heart desires;
3. the ability to update the contents of the tooltip via update('new content'); and indeed it can be dynamically loaded from various sources;
4. more, more settings and the ability to control the behavior of tooltips.

The only unpleasant thing was that, despite the author’s assurance that “it allows you to create tooltips with ease on any element” , the hints for the input [type = text] elements were not displayed. After viewing the page with the firebag, it turned out that the plugin creates a hidden div inside the element for which a hint is needed:

1. var tooltip = jQuery ( document. createElement ( 'div' ) )
2. ...
3. . appendTo ( elem ) ;

(26 line in the code).

Well, it's clear that the div inside input is not a valid move. Therefore, we change the appendTo to insertAfter , and the hints start to be displayed in a fun way for input s.

There is also a small problem with the display in the dialog boxes jqueryui . for the correct display in them, in addition to the standard class .tooltip, you need to create a class, say tooltipForDialogBox , where to remove position: absolute; and the tooltip will be displayed in dialog boxes.

And finally, if you need to change the message text, then you need to use the update method already, since the tooltip has already been created. To determine whether it already exists, I used the following structure:

1. if ( $ ( '#edit' ) . next ( ) . hasClass ( 'tooltipForDialogBox' ) )
2. {
3. var tip = $ ( '#edit' ) . eq ( 0 ) . simpletip ( ) ;
4. tip. update ( 'New content' ) ;
5. }
6. else
7. {
8. $ ( '#edit' )
9. . simpletip ( {
10. content : 'first content' ,
11. baseClass : 'tooltipForDialogBox'
12. } ) ;
13. }

The plugin page has a good API and demo.

I hope someone will benefit from the post and save him time so as not to feel sorry for my time spent)