chapter no.9 - user interface plugins: tooltip plugins"- jquery 1.4 plugin development beginner's...

8/11/2019 Chapter No.9 - User Interface Plugins: Tooltip Plugins"- jQuery 1.4 Plugin Development Beginner's Guide by Giulio

1/19

P U B L I S H I N G

community experience distilled

jQuery 1.4 Plugin DevelopmentBeginner's Guide

Giulio Bai

Chapter No.9

"User Interface Plugins: Tooltip Plugins"


2/19

In this package, you will find:A Biography of the author of the book

A preview chapter from the book, Chapter NO.9 "User Interface Plugins: TooltipPlugins"

A synopsis of the books content

Information on where to buy this book

About the AuthorGiulio Bai is a law student living in Modena, Italy who spends most of his time toyingwith stu ff that doesn't have anything to do with law.

Even after trying to keep the list of his past achievements as short as possible, the numberof projects he joined in (and invariably sunk short thereafter) makes it hard to narrowdown his interests to programming and carousels alone.

It should be made clear that any claim of responsibility for those unfortunate ventures iswholeheartedly rejectedthey never had the necessary potential to make it anyway.

I can't brag about this book with anybody if no credit for the beautifulJavaScript library jQuery is given to its author, John Resig.

Also, a bunch of thanks are randomly distributed to everybody I had anykind of contact with, in both real and virtual life, who haveno doubtsomehow helped me in writing this precious manuscript.

For More Information:www.PacktPub.com/jquery-plugin-development-beginners-guide/book
http://www.packtpub.com/jquery-plugin-development-beginners-guide/bookhttp://www.packtpub.com/jquery-plugin-development-beginners-guide/book


3/19


4/19

Chapter 4, Media Plugins: Images Plugins, discusses how images play a big role intoday's Internet. Since we don't want to be left out, nor behind, in this chapter, we do our

best to create a jQuery plugin that is very easy to use, customize, and at the same time,very e ective and good looking. Besides, a gallery-like plugin will certainly enhance theuser experience of our web pages!

Chapter 5, Media Plugins: Audio Plugins, shows us how, after images, sounds too can beused in a variety of di erent ways to hold the visitor's attention. Not only will we learnhow to develop a jQuery-based audio player plugin, but we will also analyze theadvantages and disadvantages of the HTML5 audio tag, compared toJavaScript solutions.

Chapter 6, Media Plugins: Video Plugins, presents a detailed guide to the creation of avideo player plugin, and also o ers some hints on how to better display video objects ona web page with the aid of JavaScript and/or HTML code.

Chapter 7, Form Plugins, shows a handful of di erent, but all extremely useful, pluginswe can develop in order to improve our forms and o er an enhanced user experience onour website. A number of jQuery plugins are coded, step-by-step, and discussed to betterunderstand what to use, how to use it, and in what circumstances.

Chapter 8, User Interface Plugins, o ers many plugin examples and explains how thedeveloper should tackle the problem, in such a way that the final result can be easilymodified and integrated into an organized project.

Chapter 9, User Interface Plugins: Toolti p Plugins, explains that to get a fully workingtoolti p plugin, a series of preliminary steps is required. These include understandingmouse movement and events, positioning through CSS rules, and, last but not least,interaction with jQuery code to actually show and hide the toolti p element at our will.



5/19

Chapter 10, User Interface Plugins: Menu and Navigation Plugins, discusses howdeveloping menu and navigation plugins with some additional e ects to enhance their

appearance and user experience is rather simple. The principles are explained in thischapter, as well as a number of di erent approaches that we might want to use to obtain amenu plugin.

Chapter 11, Animati on Plugins, discusses how fun-to-activate and nice-to-look-atanimation plugins play one of the most important roles when it comes to user interaction.Be it a moving image or a bouncing shape, they are always worth the time spent codingthem and actually amuse the visitor. We will learn how to make things move, bounce,fade in and awaynothing more, nothing less.

Chapter 12, Utility Plugins, shows how creating utility plugins (which can be easily usedthanks to jQuery's own internal structure and which allow for a very e ective integration)is a big plus. If we need some kind of function or method to take care of some repetitive

task, we could speed up the process with just a few lines of code.Chapter 13, Top jQuery Plugins, is a selection of the top 10 plugins. It briefly shows howthey are customized on a website, their uses, their advantages and disadvantages, as wellas provides a basic documentation that readers can easily use and refer to when (and if)they decide to mess with any of the plugins discussed in this chapter.



6/19

9User Interface Plugins:

Tooltip Plugins

We might want to start o ff by saying tool t ps are very popular in today's webdesign. This is probably due to the value that the tool t ps add to the overall lookof a website and the sensible addi t on to a nice user experience that they willcertainly contribute.

Also, as we have seen for many other plugins, which are not that di ffi cultto createprovided we know exactly what to do and how to do itthereshouldn't be much of an issue with developing the tool t p plugin. It may actuallytake some t me to understand how to posi t on elements based on the mousecursor posi t on itself and how to move de f ly with an increasing number of

func t ons doing di ff erent things. However, we're now on the path to becomingexperts, and fearless too!

The topics we're going to discuss include:

Tool t p plugins in general

Posi t oning the tool t p

Merging pieces together

Custom jQuery selectors



7/19

User Interface Plugins: Tool t p Plugins

[ 150 ]

Before we get started, there is another li le thing worth men t oning: we have decided todeal with tool t ps and menus (in the next chapter) in par t cular detail. This has been donenot only because these two topics are some of the most discussed and certainly s t r up somecuriosity, but because they also provide many di ff erent opportuni t es (more than other typeof plugins, at least!) to introduce new concepts and ideas, even while keeping the complexityof the whole plugin at a minimum.

We can now go on to create our plugin, star t ng with basic func t onali t es, and subsequentlyadjus t ng its goals. We will add new, improved func t onali t es that, however, do not make thewhole code look too di ffi cult to understandeven a f er some t me or for someone who's

just star t ng out with jQuery.

Tooltip plugins in generalA lot has been said about tool t p plugins, but it's worth repea t ng the most importantpoints with par t cular regard to the way tool t ps are supposed to work, and how wewant our tool t p to behave.

First of all, we might want to get an idea of what tool t ps look like and a sample of what wewill accomplish by the end of this chapter. Here is an example:

Also, with some more work and proper applica t on of e ff ects, images, and other rela t velyadvanced techniques, we can also obtain something more complex and nicer looking, thusgiving the user the chance to specify the style and behavior for the tool t p, as follows:

http://www.packtpub.com/jquery-plugin-development-beginners-guide/bookhttp://www.packtpub.com/jquery-plugin-development-beginners-guide/bookhttp://www.packtpub.com/jquery-plugin-development-beginners-guide/book


8/19

Chapter 9

[ 151]

The idea is actually very simple. The elements we have selected will trigger an event everyt me we hover the mouse pointer over them.

The tool t p will then pop out, right at the mouse cursor posi t on, retrieving the text por t onfrom the t i t l e a ribute of the said element.

Finally, whenever we move the mouse over the same element, the plugin will move andfollow the mouse cursor un t l it goes o ff the boundaries of the element.

Positioning the tooltipThe rst problem we have to face is, of course, how to make the tool t p appear in theright posi t on.

It would be no trouble at all if we just had to make some text, image, or anything else

show up. We've done it many t mes and it's no problem at alljust make their posi t oningabsolute and set the right top and side distances.

However, we need to take into account the fact that we don't know exactly where the mousecursor might be and, as such, we need to calculate distances based upon the mouse cursorposi t on itself.

So, how can we do it? It's simple enough; we can use some of the JavaScript event proper t esto obtain the posi t on. Unfortunately, Internet Explorer always tries to put a spoke inour wheel.

In fact, the magni cent browser does not (according to this table, which is quite accurate:ht t p: / / www. qui r ksmode. or g/ dom/ w3c_ cs som. ht ml #mousepos ) support pageX and

pageY , which would normally return the mouse coordinates rela t ve to the document.

So we need to think about a workaround for Internet Explorer, as jQuery (from version 1.0.4onwards) does not normalize some of the event proper t es according to W3C standards(ht t p: / / api . j quer y. com/ cat egor y/ event s/ event - obj ect / ).



9/19


[ 152 ]

The following diagram (also provided in the code bundle) should clarify what the visibleviewport is (that is, the browser windowthe red box):

Whenever we scroll down, di ff erent parts of the document (blue) are shown through thebrowser window and hidden due to space constraints. The scroll height (green) is the partof the document currently not displayed.

Custom jQuery selectorsSupp ose we have a page with some text wri en in, which also contains a few links to bothinternal pages (that is, pages on the same server) and external websites.

We are presented with di ff erent choices in terms of which elements to apply the tool t p to(referring to links as an example, but they apply to any kind of element as well), as follows:

All the links

All the links with a speci c class (for example, t ool t i p )

All the links with the t tle a ribute not empty

All the links poin t ng to internal pages

All the links poin t ng to external websites

Combina t ons of the above



10/19

Chapter 9

[ 153 ]

We can easily combine the rst three condi t ons with the others (and with themselves) usingCSS selectors appropriately. For example:

$("a") , all the links

$( " a. t ool t i p" ) , links having a t ool t i p class

$( " a[ t i t l e] " ) , links with a t i t l e a ribute (s t ll have to check if empty)

$( " a. t ool t i p[ t i t l e] " ) , links with a t ool t i p class and a t i t l e a ribute

As for internal and external pages, we have to work with jQuery selectors instead.

Time for action creating custom jQuery selectorsAlthough jQuery makes it easy to select elements using standard CSS selectors, as well assome other selectors, jQuery's own selectors are the ones that help the developer to write

and read code. Examples of custom selectors are : odd , : ani mat ed , and so on.

jQuery also lets you create your own selectors!

1. The syntax is as follows:

/ / def i ni t i on$. expr[ ' : ' ] . cust omsel ector = f uncti on( obj ect , i ndex, proper t i es,l i st ) { / / code goes here};/ / cal l$( "a: cust omsel ect or" )

2. The parameters are all op t onal except for the rst one (of course!), which isrequired to perform some basic stu ff on the selected object:

obj ect : Reference to current HTML DOM element(not jQuery, beware!)

i ndex : Zero-based loop index within array

pr oper t i es : Array of metadata about the selector (the 4thargument contains the string passed to the jQuery selector)

l i s t : Array of DOM elements to loop through

3. The return value can be either:

t r u e : Include current element

f al se : Exclude current element



11/19


[ 154 ]

4. Our selector (for external links detec t on) will then look, very simply, like thefollowing code:

$. expr[ ' : ' ] . ext ernal = f unct i on( obj ec t ) { i f ( obj ect . host name) / / i s def i ned r et ur n( obj ect . host name ! = l ocat i on. host name) ; el se r et ur n f al se;};

5. Also note that, to access the jQuery object, we have to use the following (sinceobject refers to the DOM element only!):$. expr[ ' : ' ] . sampl e = f uncti on( obj ect) { al er t ( ' $( obj ) . at t r ( ) : ' + $( obj ect ) . at t r ( " hr ef " ) + ' obj . hr ef : '+ obj ect . hr ef ) ;};

Merging pieces togetherWe have slowly created di ff erent parts of the plugin, which we need to merge in order tocreate a working piece of code that actually makes tool t ps visible.

So far we have understood how posi t oning works and how we can easily place an element ina determined posi t on.

Also, we have found out we can create our own jQuery selectors, and have developed asimple yet useful custom selector with which we are able to select links poin t ng to eitherinternal or external pages. It needs to be placed at the top of the code, inside the closure, as

we will make use of the dollar symbol ($) and it may con

ict with other sof

ware.

Time for action creating a tooltip pluginWe s t ll need to think of a way to actually ma ke the tool t p show up and disappear, which isno big deal a f er all. Let's see how.

1. You should have created the directory containing the right les by now; but anyway,call the plugin le j query. t ool t i p. j s and let's move on.



12/19

Chapter 9

[ 155 ]

2. Af er copying and pas t ng the code from the various les we used before, we shouldend up with something like this:

( f unct i on( $) { $. expr[ ' : ' ] . ext ernal = f unct i on( obj ec t ) { r et ur n( obj ect . host name ! = l ocat i on. host name) ; };

$. f n. t ool t i p = f unct i on( ) { r et ur n t hi s. each( f uncti on( ) { $( t hi s) . hover ( f uncti on( event ) { / / mouse hover }, f unct i on( ) { / / mouse l eaves }) . mousemove( f unct i on( event ) { / / mouse moves }) ; }) ; };}) ( j Query)

3. We have to take care of a few things now:

Check if the element is actually a link (who knows!)

Check if the t tle a ribute is not empty

Make sure that the default tool t p is not displayed

Apply CSS styling to the tool t p

4. We can then add the following code at the very start of the each loop. The eventbinding will, therefore, be condi t oned to the fact that the selected element is anelement with a t i t l e a ribute.

Also, we will remove the t i t l e content so that the default tool t p will not show up(note we rst save the t tle content so that we can use its text later on!).

var e = $( t hi s) ;var t i t l e = e. at t r ( " t i t l e" ) ;

i f ( t i t l e ! = ' ' ) { t hi s. t i t l e = ' ' ;

/ / mouse hover, move and out event s}



13/19


[ 156 ]

5. Once the mouse pointer hovers, we need to create the t ool t i p element, insertthe text, hide it in order to make it fade, and then apply the necessary CSS to it

(update its posit

on).$( ' ' ) . appendTo( "body") . t ext ( t i t l e) . hi de( ) . updat ePosi t i on( event ) . f adeI n( 400) ;

6. Eventually, we might want to create another short func t on to take care of theupdate posi t on stu ff since we have to repeat it a couple of t mes and we havemuch more control in terms of what we need it to do with less code.

$. f n. updat ePosi t i on = f unct i on( event ) { r et ur n t hi s. each( f uncti on( ) {

$( t hi s ) . cs s( { / / we modi f y t he di st ances by some pi xel s t o make sur e / / t he t ool t i p i s vi si bl e and put i n t he best pl ace. l ef t : event . pageX+20, t op: event . pageY- 20 }) ; }) ;};

7. As for the events related to the mouse moving out, around, and on the element, wehave the following two lines to do the job very smoothly:

/ / mouse l eaves$( "#t ool t i p") . r emove( ) ;

/ / mouse moves$( "#t ool t i p") . updat ePosi t i on( event ) ;

8. Last, but not least, we need to style the tool t p box to make it a li le be er lookingand provide absolute posi t oning.

Include the following code into a CSS le named a f er the plugin (that is, j quer y. t ool t i p. cs s ) and make sure that you link it to the page.

#t ool t i p { backgr ound: #f bf 7aa; col or : #a2844a; posi t i on: absol ut e; max- wi dt h: 150px;

paddi ng: 5px; bor der : 1px sol i d #a2844a; f ont - si ze: 12px;}



14/19

Chapter 9

[ 157 ]

9. Our tool t p is nally ready for using, and calling it as we described earlier certainlywill work wonders!

10. And here is the complete code for our plugin. It has been broken down into smallerpieces and func t ons to make for be er looking and more understandable code:

( f u ncti on( $) { $. expr[ ' : ' ] . ext ernal = f unct i on( obj ec t ) {

r et ur n( obj ect . host name ! = l ocat i on. host name) ; };

$. f n. updat ePosi t i on = f unct i on( event ) { r et ur n t hi s. each( f uncti on( ) { var xy = get PageXY( event ) ;

$( t hi s ) . cs s( { l ef t : event . pageX+20, t op: event . pageY- 20 }) ; }) ; };

$. f n. t ool t i p = f unct i on( ) { r et ur n t hi s. each( f uncti on( ) { var e = $( t hi s) ; var t i t l e = e. at t r ( " t i t l e" ) ;

i f ( e. i s ( " a" ) && t i t l e ! = ' ' ) { e. r emoveAt t r ( ' t i t l e' ) . hover ( f unct i on( event ) { / / mouse hover s $( ' ' ) . appendTo( "body") . t ext ( t i t l e)

. hi de( ) . updat ePosi t i on( event ) . f adeI n( 400) ; }, f unct i on( ) {



15/19


[ 158 ]

/ / mouse l eaves $( "#t ool t i p") . r emove( ) ; }) . mousemove( f unct i on( event ) { / / mouse moves $( "#t ool t i p") . updat ePosi t i on( event ) ; }) ; } }) ; };}) ( j Query)

What just happened? The whole process for ge ng a ( nally) working tool t p plugin should be clear by now.Anyway, here's a quick checklist of what we have done and what needs to be done in order

to develop a jQuery plugin similar to ours.Disable the default tool t p display for elements that match our selec t on and have at i t l e a ribute (se ng it to an empty string is enough for the tool t p not to appear,but we have to remember to copy the said string to a variable so we can use the textcontained a f erwards).

When the mouse pointer hovers for the rst t me on a link, a new tool t p divisionis created. The tool t p box will be appended to the body and will be given absoluteposi t oning. So we can set its distance from the top and le f edges and make itappear close to the mouse cursor.

As the mouse pointer moves on the link, the tool t p should follow. We thus needto update its t op and l ef t values according to the mouse cursor loca t on.

Eventually, the mouse will move away from the link and the tool t p shoulddisappear. The whole process will repeat over and over for each link in the page.

Also, a couple more points to discuss are directly related to this script's cross-browsersupport and further customiza t on of the tool t p.

As for the rst, even though we have actually never taken browsers into account un t lnow, we should, of course, do whatever possible to get our plugin working on manydiff erent browsers.

This is to our advantage, a f er all. If the plugin isn't working smoothly in any situa t on, ourweb page will not look good, behave right, or do what we thought it would.



16/19

Chapter 9

[ 159 ]

Step by step, plugin a f er plugin, we are slowly adding more and more concepts andcode into our plugins. This makes for a more advanced approach to plugin development,taking care of even li le imperfec t ons and aws that our so f ware might have ondiff erent browsers.

As for what customiza t on is concerned, not much can be said, actually. The tool t p box iscontained in a DIV element and, as such, all the normal CSS rules apply.

With li le e ff ort, we can thus obtain a more complex and appealing interface for ourpluginprovided we have some skills at CSS wri t ng. Images can be added too, to givethe tool t p some shadow or other e ff ects that CSS-only solu t ons will not allow.

Have a go hero add options

Finally, the user should be given the opportunity to customize the tool t p plugin according to

their needs and liking. So an op t on-less structure (as it is now) isn't actually the best choicein terms of usability.

It's true that users can include their own CSS le and overwrite every single instruc t on.However, some tasks, such as making rounded corners, changing the background, andselec t ng the font color, are more suitable for immediate applica t on directly opera t ng onthe code (and thus the func t on call) rather than going all the way for a separate stylesheet.

Add op t ons to give the user the possibility to change the above-men t oned parameters in aquick and easy way. You should also parameterize the o ff sets from the cursor and can add,along with rounded corners, the anima t on used when the tool t p is shown.

Pop quiz

1. What are the tasks we have to carry out, and in what order, to successfully develop aworking tool t p plugin for jQuery?

A. Retrieve the mouse pointer's posi t on, disable the default tool t p, create thetool t p and show it, and remove the tool t p object.

B. Retrieve the mouse pointer's posi t on, create the tool t p and show it, updatethe posi t on as needed, and hide the tool t p object.

C. Retrieve the mouse pointer's posi t on, disable the default tool t p, createthe tool t p and show it, update the posi t on as needed, and remove thetool t p object.

D. Retrieve the mouse pointer's posi t on, create the tool t p and show it, hide thetool t p object, and update the posi t on as needed.



17/19


[ 160 ]

2. Theore t cally, a tool t p should disappear once the mouse cursor pointer moves o ff the element that we chose as the tool t p target.

How can we recognize that, in fact, the mouse cursor has been moved away fromthe element and the tool t p should be removed or deleted?

A. We can't. That's why we wait un t l another element, which has been assigneda tool t p, is hovered upon so that the previous tool t p disappears and the newone is shown instead.

B. Adding another (even anonymous) func t on as the second argument of thehover event tells jQuery to run the contained code once the mouse movesout o ff the selected element.

C. Using the mouseof f event, which jQuery provides by default, and is triggeredwhenever the mouse pointer, a f er having been over the selected element, ismoved away from it.

D. None of the above.

3. Which of the following code por t ons actually does what it's intended for?

A. Select external links.

$. expr [ ' : ' ] . sampl e1 = f uncti on ( ) { r et ur n ( obj ect . host name ! =! = l ocat i on. host name) ; };

B. Select external links.

$. expr [ ' : ' ] . sampl e2 = f uncti on ( ) { r et ur n ( obj ect . host name == l ocat i on. host name) ; };

C. Select external links.

$. expr [ ' : ' ] . sampl e3 = f uncti on ( obj ect) { r et ur n ( obj ect . host name == l ocat i on. host name) ; };

D. Select links with t tle a ribute matching one of the given strings.

$. expr [ ' : ' ] . sampl e4 = f uncti on ( a, b, c , d) { var e = eval ( "( [ " + c[ 3] + ") ] ") ; f or ( var i =0; i


18/19

Chapter 9

[ 161]

B. Just a way to t dy up our code, with no real applica t on except for thosesitua t ons where we actually need a func t on-like approach to a problem thatcouldn't be solved in any other way due to the par t cular code structure jQueryis wri en in.

C. Crea t ng a selector lets us access a set of func t ons and method that we wouldotherwise never have had a chance to make use of. These new methods allow asimpler and understandable code-wri t ng style we should look forward to onlywhen wri t ng par t cularly complex code por t ons.

D. None of the above.

SummaryBy now the structure lying behind a plugin is rather clear and the points that all of the

plugins seem to share come out with no problem whatsoever. This leads to a quicker andmore con dent approach to plugin development.

Also, the development pa ern we have followed un t l now has, of course, maintained acertain linearity and coherency. But we have gradually introduced di ff erent, more advanced,techniques and have learned a few new tricks that might come in handy at a later t me, too.

During the crea t on of our tool t p plugin we have faced some problems, for which we haveprovided some exible yet direct solu t ons, thanks to the modularity and object-orientedapproach jQuery lets us make use of, as well as the incredible op t ons available to overcomea par t cular hurdle in many di ff erent ways.

Our code is ge ng cleaner and cleaner as we move along, and di ff erent func t ons do

diff

erent things.Speci cally, a func t on is responsible for retrieving the horizontal and ver t cal coordinates ofthe mouse cursor, whereas a method has been designed with the only purpose of upda t ngthe tool t p posi t on based on the distances from the top and le f edges.

Our plugin main code eventually had the sole goal of merging these features into a singlepiece of code (that is the plugin itself).

With the successful realiza t on of a working tool t p plugin, our rst a empt at ge ng a be erunderstanding of what a user interface plugin actually is, and how they are supposed to workto increase the overall quality and visual appearance of the web page, has happily concluded.

The next chapter will instead deal with a di ff erent aspect of the user interface: menus. O f enit is overlooked and not given the right amount of importance. The fundamental groupings oflinks that link all of the web pages together are indeed a hot target for many user interfacetweaks. We can easily experiment on these with the invaluable help of the jQuery library.



19/19

Where to buy this bookYou can buy jQuery 1.4 Plugin Development Beginner's Guide from the Packt Publishingwebsite: https://www.packtpub.com/jquery-plugin-development-beginners-guide/book .

Free shipping to the US, UK, Europe and selected Asian countries. For more information, pleaseread our shipping policy .

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals andmost internet book retailers.

P U B L I S H I N G

community experience distilled

www.PacktPub.com

https://www.packtpub.com/Shippingpolicyhttps://www.packtpub.com/Shippingpolicyhttp://www.packtpub.com/jquery-plugin-development-beginners-guide/bookhttps://www.packtpub.com/Shippingpolicyhttp://www.packtpub.com/jquery-plugin-development-beginners-guide/book

chapter no.9 - user interface plugins: tooltip plugins"- jquery 1.4 plugin development beginner's...

Documents