The recent jQuery UI 1.9 release included a new tooltip plugin that can be used to create tooltips much like the native tooltips the browser provides. The difference is that jQuery UI’s version are completely customizable.
As such I thought I’d show a quick example of how you can create a pointer from the tooltip to its associated field. The following will show a pointer tooltip a the text input. You can change the location of the tooltip using the buttons.
Pointer tooltip example Open in New Window
So how is this done?
- The position option is used to place the tooltip appropriately around the textbox. Importantly the
collisionproperty is set to
none, since, if the tooltip were to be repositioned the arrow would be placed incorrectly.
- The pointers themselves are created using using the
::beforepseudo-elements. For some more information on the technique and to see some other variations there’s an excellent tutorial here.
- Since the
::beforepseudo-elements are used to create the pointers, IE < 8 users will not see them. However, they’ll simply see the default pointerless tooltip, no harm done. Note: IE8 supports the before/after pseudo-elements but as
::after. So if you need IE8 support use