Simpletip tooltip plugin

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


Until recently, I used the convenient and small jQuery Tools Tooltip plugin , which suited me all.
And so I decided to find another because:

1. The text that is contained in the title attribute of the element for which the tip is needed is displayed in the tooltip. You can still pass through the tip attribute in the constructor, but you need to pass the jQuery selector , and not just the text. In general, it is not very convenient and not very flexible;
2. After creating a tooltip, it is impossible to change the text and generally the contents of the tooltip (nor a simple change of the title attribute, no subsequent constructor call $('#email').tooltip();helps). In general, there is no regular means, it saddens.

I decided to look for an alternative, since I needed to update the help text exactly (since the interaction with the server via ajax and the page does not overload).

Googled here such a SimpleTip plugin .

From the amenities:
1. a packed file weighs 3.3 kB versus 3.4 for Tools Tooltip;
2. text transmission in the constructor $('#email').simpletip({content: 'hello world'});, html can also be transferred there, that is, to display whatever your heart desires;
3. the ability to update the contents of the tooltip through update('new content');, and indeed dynamically can be loaded from different 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 “it allows you to create tooltips with ease on any element” , tips for input [type = text] elements were not displayed. After viewing the page with the firebug, 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 code).

Well, of course, the div inside the input is not the right move. Therefore, we change appendTo to insertAfter , and the prompts begin to display fun for input s as well.

There is also a slight problem with displaying in jqueryui dialogs . for 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 also be displayed in the dialog boxes.

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

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 find the post useful and save him time so that I don’t feel sorry for my spent)