IntroductionPreviewing the final project| 00:03 | Hi! This is Chris Converse and this is a course on
adding a jQuery based tooltip to your website.
| | 00:08 | I want to start by first showing the final
project of what we are going to be creating.
| | 00:12 | So I am going to open the
index.html file up in a browser.
| | 00:15 | So when we roll over certain links
inside of this document, you will see that we
| | 00:19 | have a tooltip that fades in.
When I scroll away, it fades out.
| | 00:23 | When it's onscreen it also follows the
mouse, and another interesting aspect is
| | 00:27 | we actually position the tooltip
right and left. So notice if I am on the
| | 00:32 | left-hand side of the screen, the
position of the tooltip is on the right.
| | 00:35 | And if I roll over a tooltip that's
on the right-hand side, we position it
| | 00:39 | in toward the left.
| | 00:40 | We are also going to be creating two
types of tooltips, one that just have
| | 00:44 | simple text and one that have HTML
formatted content and graphics, like the one
| | 00:47 | we are seeing here, and we are even
going to detect for the height of the
| | 00:51 | browser. So tooltips that are near
the top of the screen, we'll position the
| | 00:55 | tooltip underneath of the cursor,
versus tooltips that will position
| | 00:57 | themselves above the cursor.
| | 00:59 | So to illustrate how we are going to
do this, I want to bring up a sketch.
| | 01:02 | So what we are going to be doing here
is having HTML triggers on our page, and
| | 01:06 | when our cursor rolls over one of the
triggers, we are going to take a div, add
| | 01:10 | content into it and then attach the
div near the mouse, so as the mouse moves
| | 01:15 | around, the tooltip will move around
and then when we roll outside of the
| | 01:18 | trigger, we are going to
have the tooltip fade away.
| | 01:21 | We're going to be writing this in such
a way that the content for the tooltips
| | 01:25 | is going to be in the HTML and on the trigger.
| | 01:28 | So you can have as many
tooltips on a page as you want.
| | 01:31 | So I hope this course sounds
interesting to you, and if so, let's get started.
| | Collapse this transcript |
| About the exercise files| 00:00 | When you download the exercise files, there's
going to be three folders inside of there;
| | 00:04 | folders 1, 2 and 3.
| | 00:05 | For those of you who are Premium
members of the lynda.com online training
| | 00:08 | library, you will have access
to all three of these folders.
| | 00:11 | However, for those of you who are not
Premium members, we do offer all of the
| | 00:15 | files inside of folder 1 for free.
| | 00:17 | Now folder 1 contains all the files
that are going to give us a basic layout
| | 00:21 | that we can work from.
| | 00:22 | Now you can follow along in this
course by adding a tooltip into an existing
| | 00:26 | website or web page that you have, or
you can use the files inside of folder 1
| | 00:30 | and work inside of here.
| | 00:32 | For Premium members, we have folder 2
which contains a source Photoshop file
| | 00:36 | with all of the slices intact.
| | 00:37 | So you can use this to customize some
of your graphics while you are taking
| | 00:41 | this course, and then lastly, inside of
folder 3 is a copy of the entire final project.
| | 00:46 | So you can open up the files inside of
here and see how the project that you are
| | 00:50 | building is tracking with what
we should have as a final project.
| | 00:53 | So now that we are familiar with the
exercise files, next we can work on
| | 00:56 | creating the project folders.
| | Collapse this transcript |
|
|
1. Creating Web GraphicsCreating a folder and adding the starter files| 00:00 | Now to begin our project, let's
create a new folder on the desktop.
| | 00:06 | We'll name this myTooltip.
| | 00:11 | I am going to just resize this a
little bit and put it over here on the side.
| | 00:19 | Once that folder is created, let's come
back to the exercise files, let's open
| | 00:23 | up folder 1, and let's grab a copy of
the of the images directory, the includes
| | 00:27 | directory and the index.html, and
let's drag a copy of these over into that
| | 00:31 | folder we just created on the desktop.
| | 00:34 | So as I mentioned before, I have already
gone ahead and created some of these files.
| | 00:37 | I want to focus this course
on creating the actual tooltip.
| | 00:41 | So I want to give you a web page that
you can actually work inside of, if you
| | 00:44 | choose not to work inside
of your existing website.
| | 00:46 | And so what we are going to have here inside
of the includes directory, is a copy of jQuery.
| | 00:51 | I have two CSS files;
| | 00:52 | the tooltip.css file has some
rules in it, just for the layout.
| | 00:56 | We are going to be adding
our own in for the tooltip.
| | 00:59 | The ie version of the CSS is empty.
| | 01:01 | We are going to put our own CSS rules
in there, and in the images directory, we
| | 01:05 | have all of the graphics that the layout uses.
| | 01:07 | So to take a quick peek at the layout, let's
open up the index.html file up in a browser.
| | 01:12 | So what we have here is a really
simple, straightforward layout. We have a
| | 01:15 | heading area across the top. We have a
content area over on the left-hand side,
| | 01:19 | and then a sidebar area
over on the right-hand side.
| | 01:22 | The design is liquid, so
you can condense this down.
| | 01:24 | We are actually going to be using
this feature to show how we actually
| | 01:28 | switch the tooltip from the right
side to the left side, like we looked at
| | 01:31 | in the introduction video.
| | 01:32 | So now that we have a web page that we
can put a tooltip into, next we'll work
| | 01:36 | on customizing the graphics.
| | Collapse this transcript |
| Saving web graphics from Photoshop| 00:00 | Now the exercise files that we're
providing with this course, both the free
| | 00:03 | ones and the Premium ones include an images
directory which has all the graphics in here.
| | 00:08 | So if you prefer to skip customizing
the graphics in Photoshop, you can simply
| | 00:12 | go to the next movie and just
continue on with the course.
| | 00:15 | For those of you who want to
customize the graphics or at least see how the
| | 00:18 | Photoshop file is setup, let's come over
to the exercise files, let's open up Art
| | 00:22 | Templates and let's open up template_items.psd.
| | 00:26 | Now inside this Photoshop file here, I'm
just going to zoom up here a little bit.
| | 00:31 | Over in the Layers panel at the
very bottom we have a Layer called fpo.
| | 00:34 | We'll just turn that on. This is just
simply a gray layer in the background, so
| | 00:39 | that we can actually see through,
some of these transparent graphics.
| | 00:41 | So over on the toolbar we can click on
the Cropping tool and see that we have
| | 00:48 | the Slice and Slice
Selection tool under the Crop tool.
| | 00:51 | So I'll come down here and
select the Slice Selection tool.
| | 00:54 | This allows us to
customize the individual slices.
| | 00:57 | So down here I have a copy of the lynda.com
logo that we're going to use inside of
| | 01:01 | one of the tooltips. I just pulled
this right off of the website.
| | 01:05 | We have a logo file here. At the top we
have a custom banner with a photograph
| | 01:08 | inside, and then here we have a semi-
transparent block that we're going to be using
| | 01:13 | at the background for tooltip, since
Internet Explorer 7 and 8 don't support
| | 01:17 | semi-transparency in CSS3.
| | 01:20 | To see how this is set up, I can come
over here and select the layer called ie
| | 01:24 | box and we can see that the Opacity is
set to 85%. This is the same percentile
| | 01:28 | we're going to set black to using
CSS3 in the RGBA color space to get a 15%
| | 01:33 | transparent black box.
| | 01:35 | Now to customize the artwork inside of here,
you can work on the canvas on
| | 01:39 | any one these individual layers and
realize that anything that's in the canvas
| | 01:43 | that's inside of the slicing area is
going to be included inside of that slice.
| | 01:47 | Once you've completed that, come over
here to the Layers panel, turn off the
| | 01:52 | fpo layer, and what we're going to do now is
export out all of these individual slices.
| | 01:56 | So we are going to do that by coming up to
the File menu, come down to Save for Web & Devices.
| | 02:02 | Now if you're using Photoshop CS6
this menu will simply say Save for Web.
| | 02:09 | Next we'll see the Save for Web
dialog box. We can come in here and
| | 02:13 | select individual slices.
| | 02:14 | Over on the right-hand side we can
pick the file format and the Optimization
| | 02:17 | settings, so the banner is
being set to a JPEG at 75% Quality.
| | 02:23 | Now the logo was set to a 24-bit PNG,
which is going to give us a lot of nice
| | 02:28 | semi-transparency on the pixels.
| | 02:29 | The lynda.com logo is being set as a
GIF, and then this slice here that we're
| | 02:35 | going to use as the background for IE
7 and 8 is set to a 24-bit PNG as well.
| | 02:39 | Now all of these slices and all of the
Optimization settings are saved inside
| | 02:43 | of the PSD file. Let's come down here
and click Save from the Save Optimized As
| | 02:50 | dialog box, let's come to Slices. You can
come down here and choose All User Slices.
| | 02:55 | This way Photoshop will only pay
attention to the slices that we have drawn and
| | 02:59 | it will ignore the rest of the slices
that are used to complete the canvas.
| | 03:03 | And from the desktop, let's choose
myTooltip > images directory, choose Save and
| | 03:10 | when Photoshop asks you if it's okay
to replace all these files you can come
| | 03:13 | over here and click on Replace.
| | 03:15 | And that will then customize all of
these graphics with whatever changes you've
| | 03:18 | made inside of your Photoshop file.
| | 03:20 | Once you've exported your graphics, you
can come up to the File menu, close your
| | 03:24 | file, choose Save, and now that we have
all of our graphics created, we can then
| | 03:28 | work on editing the HTML and
CSS files in the next movie.
| | Collapse this transcript |
|
|
2. Adding HTML MarkupCreating the tooltip container| 00:00 | At this point we're ready to open up
our HTML file and start making some
| | 00:03 | changes, so I'm going to
open this up in the text editor.
| | 00:07 | Now if you're interested in taking this
course in a more visually oriented tool,
| | 00:10 | we're offering the same course in
the online training library using Adobe
| | 00:14 | Dreamweaver inside of a text editor.
| | 00:16 | And you can follow along in any text
editor or any web editor that gives you
| | 00:20 | access to the source code.
| | 00:22 | Now for those of you who are
following along and using this project file
| | 00:25 | instead of your current website, I
want to point out some of the things that
| | 00:28 | I've already setup in this file.
| | 00:30 | First is I've created a hook into the
tooltip.css file, so we are actually
| | 00:35 | linking to the CSS file that
we're going to be modifying.
| | 00:37 | I've also linked to a copy of jQuery.
I've linked to the tooltip.js file.
| | 00:42 | And down here we have an HTML conditional
statement which is targeting browsers
| | 00:46 | that are less than IE 9, so this is
targeting IE 7 and 8, and we're doing two
| | 00:50 | things here, we're linking to a copy of
the HTML5 Google shiv from Google, which
| | 00:56 | takes HTML 5 elements and allows IE
7 and 8 to understand what those are.
| | 01:01 | And down here you can see we're using
things like header, article, and aside.
| | 01:06 | These are all HTML5 tags that
IE 7 and 8 don't understand.
| | 01:10 | So this Google shiv will enable
IE 7 and 8 to understand that.
| | 01:14 | And then we also have a
link to a tooltip_ie.css.
| | 01:18 | This is where we're going to put some
custom rules for all of the things that IE
| | 01:22 | 7 and 8 don't understand as part of CSS3.
| | 01:25 | Now the first thing we need to add to
our HTML file is a container that's going
| | 01:28 | to hold a tooltip itself.
| | 01:30 | So let's scroll down here in the code,
let's find the line for the footer, let's
| | 01:35 | hit a Return, so we are outside of
all of our content-containers, but we're
| | 01:39 | still inside of the main div,
that's got a class of page.
| | 01:45 | So inside here we're going to start by
typing a div tag, space, we're going to set an id.
| | 01:52 | The name of the id we're going to create
is going to be tooltip_container, then
| | 01:59 | let's end the div tag.
| | 02:02 | So the reason we're using an id here
is ids are meant to be used once on a
| | 02:06 | page which differs from a class element, which
can be used any number of times on your web page.
| | 02:11 | So again, we're going to use an id
here just to remind ourselves that this
| | 02:14 | tooltip_container should
only appear once in our page.
| | 02:17 | And now to make this so that we can
actually see it in the page to help us with
| | 02:20 | some of our CSS rules, let's
temporarily put some text into here.
| | 02:26 | We'll just type this is my
tooltip and then hit Save.
| | 02:31 | Now that we've a container for our
tooltip. Next, we can work on the CSS styles
| | 02:35 | so that we can define the
way the tooltip should look.
| | Collapse this transcript |
| Styling the tooltip| 00:00 | Now to create a CSS rule to style our
tip container, we're going to need to open
| | 00:04 | the tooltip.css file.
| | 00:06 | So from your text editor, choose File >
Open, from the myTooltip folder let's go
| | 00:13 | into includes and let's open tooltip.css.
| | 00:19 | Now there are CSS rules in here which
are controlling our layout and style, and
| | 00:22 | down at the very bottom
we have a comment for Tooltip.
| | 00:25 | This is where we're going to add our
own custom rules for the tooltip.
| | 00:28 | So I'll just add a few lines here at the
bottom and what we are going to want to
| | 00:31 | do is target that tooltip_container.
| | 00:33 | Now it is an id, so we target that with the pound sign,
tooltip_container, then beginning and ending bracket.
| | 00:45 | Let's split these brackets open.
| | 00:47 | Now the first property we're going to
set is going to be the color of the type,
| | 00:52 | so we're going to set color: # fff; for white
| | 00:57 | Next line, we're going to set position
of absolute, this way the tooltip with
| | 01:04 | absolute positioning can hover over the
top of other objects and have its
| | 01:08 | position changed without any
relation to the other divs on the page.
| | 01:11 | Next line, we're going to set padding
of 20 pixels, that's going to set padding
| | 01:17 | on the top right bottom and left.
| | 01:19 | We're going to set a max-width of 200px,
that way regardless of any content we
| | 01:26 | put inside out there, the
tooltip will never get wider than 200.
| | 01:29 | And of course, you can
customize this for other values.
| | 01:32 | Next, we're going to set the background-color.
| | 01:35 | Now we're going to use the RGBA color space.
| | 01:38 | So we're going to type after background-color: rgba,
beginning and ending parenthesis, then a semicolon.
| | 01:46 | Inside of the parenthesis we're to
specify the red, then the green, then the
| | 01:49 | blue and then the alpha.
| | 01:52 | So to get black with RGBA, we
need to set the RGB values all to 0.
| | 01:57 | So I will type a 0 for red, 0 for green,
0 for blue, then .85. This is going to give
| | 02:05 | us 85% Opacity.
| | 02:07 | Next we want to specify rounded corners,
and we still need to use some specific
| | 02:11 | rendering engine flags.
| | 02:14 | The first is going to be webkit.
| | 02:17 | This is going to target Chrome,
Safari, Android and the iOS Platform.
| | 02:21 | So -webkit-border-radius, colon, space. We are
going to set this to 12px.
| | 02:35 | Next, we're going to set the flag for
the rendering engine that runs inside of
| | 02:40 | Firefox, which is Mozilla.
| | 02:42 | So I'm going to copy that entire line and
then replace webkit with moz for Mozilla.
| | 02:50 | Then on the next line we're going to
add the straight CSS3 property, which
| | 02:54 | actually is supported in IE 9, and
other browsers are starting to support the
| | 02:58 | straight CSS property instead of
using rendering engine flags.
| | 03:04 | So we'll type border-radius: 12px.
| | 03:09 | Once these properties are added, let's
choose File > Save, and now let's open up
| | 03:13 | the Internet Explorer version of the CSS file.
| | 03:17 | So in the code editor, let's choose File > Open.
| | 03:20 | Let's open tooltip_ie.css.
| | 03:24 | So inside of here we're going to
target to tooltip_containers as well,
| | 03:27 | #tooltip_container, beginning and ending
bracket, split that open.
| | 03:39 | Now IE 7 and 8 don't support the
maximum width setting, so we're going to come
| | 03:44 | in here and simply set a width of 200px.
| | 03:47 | On the next line we're going to set background, colon,
space, then we are going to type none with a semicolon.
| | 03:56 | So here we want to clear out all of
the background settings, since IE 7 and
| | 04:00 | 8 don't understand the RGBA
setting for background-color.
| | 04:03 | So we'll just set background to none.
| | 04:06 | Then on this line, we're going to
specify a background image and use that
| | 04:08 | transparent PNG, so we're going to type
background-image: url(../images/ie_transparency.png);.
| | 04:37 | So again, we're setting the width,
because IE 7 and 8 don't understand
| | 04:40 | max-width. We're clearing out the
background to get rid of the background color
| | 04:43 | we specified in the tooltip.css, and
then the background image we're bringing in
| | 04:48 | with the semi-transparent PNG.
| | 04:50 | That's going to gives us the same effect as
the CSS3 is giving us in the other browsers.
| | 04:54 | Now again, if we go back to the index.html
file and then scroll to the top,
| | 04:58 | remember we're only bringing
in this CSS rule for IE 7 and 8.
| | 05:02 | So other browsers are going to completely ignore
everything on line 9 through 12.
| | 05:08 | They are going ignore the Google Shiv,
they are going to ignore the tooltip.css;
| | 05:11 | only IE 7 and 8 are going to see this.
| | 05:14 | So now with our CSS rules in place,
let's come back to our project folder, let's
| | 05:18 | open up the HTML file up in a browser,
let's hit Reload, and we should see the
| | 05:23 | This is my tooltip in the
lower left-hand corner here.
| | 05:25 | We see our rounded corners. We see that
the background is 85% opaque against
| | 05:31 | the blue background, and we see that
the container is actually showing up after
| | 05:34 | the footer element.
| | 05:35 | Now even though we did specify absolute
positioning on this object, we haven't
| | 05:39 | given it a top or a left property yet.
| | 05:41 | So we haven't actually told it to
position itself anywhere. We're going to be
| | 05:45 | doing that later on with JavaScript.
| | Collapse this transcript |
| Adding the tip info| 00:00 | Now in order for us to be able to have
content show up in the tooltip, we need
| | 00:04 | to put some data into the HTML
file that we can actually pull from.
| | 00:08 | So in the HTML file, we are going to
start by adding some of that data into the
| | 00:12 | anchor link that's inside of the
article, now not inside of the aside, but
| | 00:16 | inside of the first
paragraph, inside of the article.
| | 00:18 | And the linked text says text-based tooltip.
| | 00:22 | So this anchor link here, right now
we are pointing to a pound sign which
| | 00:25 | is just a self link.
| | 00:27 | Now inside of here we want to
add some additional attributes.
| | 00:29 | So we are going to start by adding
some data attributes, which is fully
| | 00:33 | compliant with HTML5 and is the
recommended way for putting data onto an HTML
| | 00:39 | element that's not seen by the public,
but gives us the ability to access
| | 00:43 | that through JavaScript.
| | 00:44 | So inside of the anchor tag, after the
href attribute, let's hit a space and
| | 00:49 | the first data item we are going to put in here is
going to be data-tip-type, equals, two quotes.
| | 01:01 | We are going to put in the word text.
Now we are making up this value, we are
| | 01:05 | going to have two different types, if
you remember from the Introduction movie, a
| | 01:08 | text-based tooltip and an html-based tooltip.
| | 01:11 | So after that attribute, but still
inside of the anchor tag, let's hit a space.
| | 01:15 | We are going to type data-tip-source, equals,
two quotes, and in here we are going to
| | 01:27 | put the actual text that's going
to show up as the tooltip text.
| | 01:32 | So we'll type "This is text for a tooltip."
| | 01:37 | And the last thing we are going to add
to this anchor tag is going to be a class;
| | 01:42 | this is how we are going to
actually target these items with jQuery.
| | 01:45 | So lastly we'll add a class attribute, equals, two
quotes, and the class is going to be tooltip.
| | 01:51 | Then hit Save.
| | 01:55 | Now we are using a class here because
we want to reuse the name tooltip, any
| | 01:58 | number of times on our page, and
what's really advantageous about this is we
| | 02:02 | can write one jQuery statement that
targets tooltips, and then we are going to
| | 02:06 | come in here and check to see what type of
tooltip it is, and then what the actual content is.
| | 02:12 | So now that we have defined an HTML
element as having a class of tooltip and
| | 02:16 | having a data tip type, and a data tip
source, next we can work on actually
| | 02:20 | finding this object and then modifying
the tooltip container based on the data
| | 02:24 | inside of this element.
| | Collapse this transcript |
|
|
3. Styling and Activating the TooltipAdding the jQuery document ready and mouse events| 00:00 | Now at this point we're ready
to start writing some JavaScript.
| | 00:03 | So let's open up the JavaScript file.
From your text editor, go to File > Open.
| | 00:07 | From the myTooltip folder, let's go into
includes, and let's open up tooltip.js.
| | 00:15 | So inside of here, we are going to write
some jQuery to target that tooltip and
| | 00:19 | then change the tooltip container content.
| | 00:21 | So let's start by putting in jQuery's
document ready, so that's $(), type in the
| | 00:29 | word document inside of the parentheses,
outside of the parentheses
| | 00:32 | we are going to type .ready();
| | 00:39 | inside of the parentheses for ready, we
are going to type function, another set
| | 00:44 | of parentheses, beginning and ending
bracket. Let's split the brackets open.
| | 00:50 | So this is jQuery's document ready structure.
| | 00:53 | So these instructions won't run
until the HTML file has been loaded.
| | 00:57 | So inside of the document ready, the
first thing we want to do once the HTML has
| | 01:01 | been loaded is target the
tooltip and set the mouse events.
| | 01:04 | So I am going to start with a $(), two
tick marks inside for a string literal,
| | 01:10 | we are going to search for .tooltip.
This is going to target every HTML element
| | 01:16 | in our page that has a tooltip, so
we can have more than one on the page.
| | 01:20 | Outside of the parentheses .mouseover, beginning and
ending parentheses, outside of the parentheses we are
| | 01:28 | going to type .mousemove, another
set of parentheses, outside of those
| | 01:34 | parentheses .mouseout, then a semicolon.
| | 01:43 | So we are attaching three properties onto
the tooltip, mouseover, mousemove and mouseout.
| | 01:48 | Inside of each one of these
parentheses, we're going to actually target the
| | 01:52 | mouse event itself. So inside of each
one of these parentheses, we're going to
| | 01:55 | put a custom function that
targets the actual event.
| | 01:58 | So we are going to type function(),
inside of the parentheses, we are going to
| | 02:05 | put letter e, outside of the
parentheses, but still inside of the parentheses
| | 02:10 | for mouseover, we are going to
put beginning and ending bracket.
| | 02:16 | I am going to select this first one
here, let's come over here and paste this
| | 02:21 | inside of each of the
parentheses for mousemove and mouseout.
| | 02:25 | Once we have all of these in place,
let's come over here and just split these
| | 02:28 | open, split each one open on the
brackets, just close up some negative space.
| | 02:39 | So now we have an area to put
instructions in for mouseover, for mousemove and
| | 02:43 | mouseout, and we'll
start that in the next movie.
| | Collapse this transcript |
| Detecting and setting text-based tooltips| 00:00 | So the first thing we want to do in the
mouseover event is to detect what type
| | 00:04 | of tooltip we're actually looking at.
| | 00:06 | So we're going to open this up a
little bit inside of mouseover and we're
| | 00:10 | going to start by typing an if
statement, so we're going to type if,
| | 00:13 | beginning and ending parentheses,
then beginning and ending bracket, let's
| | 00:17 | split the brackets open.
| | 00:20 | Let's come up inside of the parentheses
and what we're going to do is test the
| | 00:23 | actual item that was rolled over.
| | 00:25 | So since we're inside of whatever
tooltip was triggered, we can come in here and
| | 00:29 | type dollar sign, parentheses, and the
word this inside of the parentheses,
| | 00:35 | that's going to return whatever item
on the HTML has a tooltip class and was
| | 00:39 | actually rolled over by somebody's mouse.
| | 00:42 | So for that object, after this, we're
going to type .attr for attribute, put in
| | 00:49 | our parentheses, two tick marks inside
for string literal. We want to look at
| | 00:53 | the actual attribute called data-tip-type,
outside of the parentheses hit Space,
| | 01:02 | two equal signs to test the absolute
equality, then a space, two tick marks
| | 01:07 | for a string literal, and
then type in the word text.
| | 01:12 | So what we're doing is any item
that's rolled over with a tooltip class,
| | 01:15 | we're going to check the
attribute of that object and see if the
| | 01:18 | data-tip-type was text.
| | 01:20 | If it is, we're going to put our
instructions inside of this if statement.
| | 01:23 | So what we're going to do here is
we're going to target the tooltip container,
| | 01:27 | dollar sign, parentheses, tick marks
inside for string literal, pound sign,
| | 01:33 | because the tooltip container is an
ID, tooltip_container, outside of the
| | 01:41 | parentheses .html,
parentheses, then a semicolon.
| | 01:48 | Now the value of the HTML is going to
be the attribute of the same object we
| | 01:53 | rolled over called data-tip-source.
| | 01:56 | So inside of the parentheses for HTML,
let's start with dollar sign, parentheses,
| | 02:02 | this, outside of the parentheses, attr
for attribute, inside of the parentheses,
| | 02:08 | two tick marks for string
literal, data-tip-source.
| | 02:16 | Now to test this let's choose File >
Save, let's come back out to our project
| | 02:20 | files, let's reload this in a
browser and then when I come over here and
| | 02:24 | rollover the text based tooltip, once
I rollover, you'll see that the text
| | 02:28 | actually changed down here
to this is a text for tooltip.
| | 02:33 | To see that again, I'll hit Reload.
| | 02:35 | We have This is my tooltip,
which is the default text we put in.
| | 02:39 | Come over to the rollover and then
it changes to this a text for tooltip.
| | 02:43 | So now we're properly targeting every
item that has the class of tooltip and
| | 02:47 | we're able to pick out the data to see
what type it is and pull out the source
| | 02:51 | to populate the container
with that particular data.
| | 02:55 | So now that we have text-type-tooltips ready.
| | 02:58 | In the next movie, we'll start
building our structure for the HTML
| | 03:01 | based tooltips.
| | Collapse this transcript |
| Creating HTML containers| 00:01 | Now back in our HTML file, we need to
have a place inside of our file where we
| | 00:05 | can store HTML data for a tooltip.
| | 00:08 | Now inside of our data-tip-source
attribute which I'm highlighting right here,
| | 00:12 | we can put text based information,
but we can't put HTML content in here.
| | 00:17 | So if we want to format our tip in any
way, maybe change the color, use bold
| | 00:22 | type, bring in images, we've to do this
with HTML, and we can't put HTML inside
| | 00:27 | of an attribute on an HTML element itself.
| | 00:31 | So what we're going to do is create a
container to hold all of the HTML data
| | 00:35 | that we want to be able to pull
from for tips that have HTML content.
| | 00:39 | So inside of our HTML page, let's
come down to after the tooltip container,
| | 00:44 | let's hit Return, so let's add a div,
let's give this a class and let's call it
| | 00:51 | tooltip-html-source.
| | 01:00 | Let's end that div tag. Let's split that
open and inside of this div container,
| | 01:06 | we're going to put additional div
containers for each tooltip, and this is
| | 01:10 | where we're going to store the HTML data, so
we can populate that into the tooltip container.
| | 01:16 | So inside of here, let's start with a
div tag, just hit a space, we're going to
| | 01:21 | set id equal to two quotes. Inside
we're going to call this
| | 01:26 | tooltip-sidebar, let's end
that div, let's split that open.
| | 01:36 | Now inside here we want to add the
HTML for that tooltip that has the
| | 01:39 | lynda.com logo in there.
| | 01:42 | So I'll start with an image tag, we
will set a source images/lynda.gif, space,
| | 01:55 | style equals two quotes. We'll
just put an inline style on this.
| | 02:02 | We'll set that to float:left,
outside of the attribute forward slash and
| | 02:07 | then end the image tag. Next we'll type;
| | 02:13 | This is a tip that has.
| | 02:17 | Next we'll add an HTML tag to make the
next words bold, so add a strong tag.
| | 02:25 | Next, we'll also make the words italic,
so we'll type em for emphasis, let's add
| | 02:31 | a space, let's add an attribute called
style, equals two quotes. We're going to
| | 02:38 | change the color of the bold and
italic text, color, space, pound sign ffe19a,
| | 02:47 | that's going to give us that
light yellow color, then a semicolon.
| | 02:50 | So this is an inline style on the
emphasis tag, let's end that tag. We'll type
| | 02:55 | HTML-formatted, let's end the emphasis
tag, then we'll end the strong tag, then
| | 03:05 | a space, and the word content, comma,
space, including an image and a period.
| | 03:16 | So inside of this div with an id of
tooltip-sidebar, we're bringing in an image,
| | 03:21 | we're writing a sentence that says this tip
has HTML formatted content including an
| | 03:25 | image, and the word HTML formatted
is going to be strong and italic.
| | 03:31 | Now we're floating this image up
here, so we want to make sure that the
| | 03:34 | tooltip container can expand to encompass
all of its children that have float properties.
| | 03:39 | So let's hit Return, let's type div. We
will set a class and I have a CSS rule
| | 03:45 | for clearing all the objects, so we'll
type clear-all, and then end that div
| | 03:53 | tag. Let's save our work.
| | 03:56 | So now we have all of the HTML in
place that we're going to put inside of the
| | 03:59 | tooltip container. We also created
the tooltip HTML source container.
| | 04:03 | Let's come up here and copy that class
name, let's switch over to tooltip.css,
| | 04:09 | and let's come in here and hide that.
We don't actually want to see the
| | 04:12 | container that's holding
all of the HTML content.
| | 04:15 | So let's type a period, let's hit paste,
so .tooltip-html-source, beginning and
| | 04:22 | ending bracket. We're
going to set display to none.
| | 04:27 | That way when this loads, all of the
HTML content inside of the HTML source
| | 04:31 | is going to be hidden.
| | 04:33 | Now that we have the HTML in place to
hold the content for an HTML tip, in the
| | 04:37 | next movie we can add attributes to
our aside anchor link, and then do a
| | 04:41 | detection in jQuery to test for HTML-base tips.
| | Collapse this transcript |
| Detecting and setting HTML-based tooltips| 00:00 | Now back in our HTML file, what we
need to do here is add in those data
| | 00:04 | attributes into the anchor link
that's inside of the aside container.
| | 00:08 | So let's scroll up here, let's find the
aside container right here, inside there
| | 00:12 | is an anchor link with a
HTML-based tooltip link here.
| | 00:15 | Let's come inside of the anchor tag,
after the href attribute, hit space, we'll
| | 00:21 | type data-tip-type, equals, two quotes.
| | 00:28 | Inside of the quotes we'll put html,
then we'll add another attribute, hit a
| | 00:33 | space, data-tip-source, equals, two
quotes, and instead of putting actual text
| | 00:42 | here, what we're going to do is point to
the id of the container we want to use.
| | 00:47 | So if I scroll down here, we created
an ID down here called tooltip-sidebar.
| | 00:53 | Let's select that name, copy to
the clipboard, let's come up here and
| | 00:57 | let's paste that in here.
| | 01:00 | And then finally, let's come in
here and add a class of tooltip.
| | 01:05 | Let's choose Save, let's
switchover to our JavaScript file.
| | 01:08 | Now inside of the mouseover, we have our
first detection here that's checking the
| | 01:13 | data-tip-type and testing to see if
it equals text. Let's copy this entire
| | 01:18 | statement, let's hit few a Returns, still
inside of the mouseover area, let's hit
| | 01:23 | Paste and let's come in
here and change text to html.
| | 01:30 | So the second if statement is testing
the actual item that's being rolled over
| | 01:33 | to see if the attribute data-tip-type
is set to HTML, and if it is, we're going
| | 01:37 | to run these instructions inside of here.
| | 01:39 | So let's get our cursor in front of the
first statement, let's hit two Returns,
| | 01:43 | and above that what we're going to do
is declare a new variable, we're going to
| | 01:47 | type var elementToGet. We're going to
set this equal to, two tick marks for
| | 01:56 | string literal and a pound sign.
| | 01:59 | Outside of the string literal, we're
going to type a plus sign and then we're
| | 02:03 | going to type dollar sign, parentheses,
this, outside of the parentheses .attr,
| | 02:11 | beginning and ending parentheses, semicolon.
| | 02:14 | Inside of the parentheses, two tick
marks for string literal, and we want to go
| | 02:17 | out and get the data-tip-source.
| | 02:25 | So what this does is it goes out to the
item that's being rolled over and we're
| | 02:28 | checking the attribute data-tip-source,
which in this case is actually the name
| | 02:32 | of the ID where we put all of the HTML
we want to have injected. We're adding a hash
| | 02:37 | symbol here and putting these together
or concatenating this into this single
| | 02:42 | URL. It is going to give us something
similar to what we're doing up here, where
| | 02:47 | we're using jQuery to find a specific ID.
| | 02:49 | So once we've defined our variable
elementToGet, on the next line we're going to
| | 02:53 | declare a second variable. We're going
to call this one newHTML and we're going
| | 02:59 | to set that equal to, and then we're
going to type dollar sign, beginning and
| | 03:04 | ending parentheses, and we want to get
this element, so let's copy that variable
| | 03:09 | name, let's paste it down here, outside
of the parentheses we're going to type
| | 03:15 | .html, beginning and ending
parentheses, then a semicolon.
| | 03:19 | So we're going to go get whatever ID is
specified in that link, we're going to
| | 03:24 | pull all the HTML into the newHTML
variable, and then on this line we're going
| | 03:28 | to keep the tooltip container HTML,
but instead of setting it to the value of
| | 03:32 | the data-tip-source, let's remove
that, and let's come in here and copy the
| | 03:37 | newHTML variable, and let's
paste that in there instead.
| | 03:42 | Let's save our document.
| | 03:43 | Let's come back out to the
browser and let's say Reload.
| | 03:47 | Now over in our browser, we can
rollover the HTML base tooltip, and then we can
| | 03:51 | see the contents of the tooltip are now
changing to all of the HTML that we put
| | 03:54 | inside of that ID. Then I can go back
to the text-based one and see just the
| | 03:58 | text that is actually being
pulled from that source attribute.
| | 04:01 | So now that we are properly
querying every one of the tooltip items and
| | 04:04 | detecting whether they are text or
HTML and populating the tooltip container,
| | 04:08 | in the next movie we can now start to
work on attaching the tooltip to where
| | 04:12 | the mouse is.
| | Collapse this transcript |
|
|
4. Adding Positioning and Effects to the TooltipAttaching the tip container to the mouse| 00:00 | Now we need to work on actually
moving the tooltip container to match where
| | 00:04 | the user's mouse is.
| | 00:05 | So we're going to come inside of the
mousemove area here, let's add a few
| | 00:09 | Returns, and we want to
start by declaring a variable.
| | 00:11 | We're going to say var, space,
toolTipWidth, we're going to set that equal to
| | 00:19 | and we want to figure out how
wide the actual tooltip container is.
| | 00:23 | So dollar sign, parentheses, two tick marks
for string literal, #tooltip_container,
| | 00:32 | outside of the parentheses
we're going to type .outerWidth();.
| | 00:45 | Next line, second variable, toolTipHeight
= $(), tick marks for string literal,
| | 00:57 | pound sign ('#tooltip_container').outerHeight.
| | 01:11 | Now we've set a maximum-width of 200
pixels but the height can actually vary
| | 01:16 | based on the HTML data that we're
pulling in here or the text data that we're
| | 01:21 | pulling in up here, and so depending
on how much content goes in there, the
| | 01:24 | actual size of that tooltip
container is going to change.
| | 01:27 | So we want to declare the height
and the width and variables so that we
| | 01:30 | can refer back to them.
| | 01:32 | So after the variables, let's start with
$(), tick marks inside for a string literal.
| | 01:38 | We're going to target tooltip container again.
| | 01:44 | Outside of the parentheses
we're going to type .css();.
| | 01:52 | Inside of the parentheses we're going to
start with the string literal, two tick
| | 01:55 | marks, we're going to set the left
property outside of the string literal but
| | 02:00 | still inside of the parentheses.
| | 02:02 | We're going to type a comma,
another set of parentheses.
| | 02:05 | We want to do a calculation inside of here.
| | 02:07 | We're going to type e.pageX.
| | 02:12 | Now e right here is the event that's
triggering this, which up here is the
| | 02:16 | mousemove, so when we run this generic
function, e refers back to the mouse.
| | 02:21 | So e here is the mouse movement and
then pageX is a JavaScript statement that's
| | 02:26 | going to tell the browser to let us
know where exactly the user's cursor is.
| | 02:30 | So we're going to take the x position and
then we're going to subtract 20 from it.
| | 02:35 | That way the tooltip will be a little
bit to the right of where the actual x
| | 02:39 | value is, of where the cursor hits the tooltip.
| | 02:42 | Now outside of the parentheses, plus sign,
two tick marks for string literal, and then px.
| | 02:48 | So we're taking whatever the x value is,
subtracting 20 pixels and making this
| | 02:52 | whole statement here a CSS property
with the px on it, so that's going to be
| | 02:57 | the new left property.
| | 02:58 | Let's hit a Return. Let's come up here
and copy this whole line, let's paste it
| | 03:05 | on the next line, let's come down here
and instead of left, we're going to set
| | 03:09 | the 'top' value to e.pageY, and then
we're going to add 20 pixels to this.
| | 03:17 | Now all of this is happening inside
of the mousemove function up here, so
| | 03:21 | let's save our file, let's come back
out to the browser. Let's hit Reload, and
| | 03:26 | now when we move over tooltip, we'll
see that the position of that tooltip now
| | 03:30 | sticks near the cursor and as we
move the mouse, we constantly update the
| | 03:34 | position of that object as well. Same thing for
the HTML-based tooltip on the right-hand side.
| | 03:39 | Now one thing you'll notice when I
rollover the tooltip on the right-hand side,
| | 03:44 | the tooltip, since it's aligning
itself to the left and positioning to the
| | 03:47 | right, actually moves off the browser page.
| | 03:50 | So in the next movie we're going to work
on detecting where the tooltips are and
| | 03:54 | if they are on the right-hand side of
the screen, we're going to position the
| | 03:58 | tooltip toward the left.
| | 03:58 | So the tooltips will always position
themselves, so that they're visible to the user.
| | Collapse this transcript |
| Positioning the tooltip to the right or left of the cursor| 00:00 | So the first detection we're going to
do is for the pageWidth, so that we know
| | 00:04 | whether we need to align the tooltip
to the right or left, depending on where
| | 00:08 | the mouse cursor is.
| | 00:09 | So after the variables for tooltip
width and height, let's come in here and
| | 00:12 | declare another variable, var, space, pageWidth.
| | 00:18 | We're going to set that equal to =
$(), tick marks for string literal 'body',
| | 00:26 | outside of the parentheses .width(); so
the width of the overall browser is now
| | 00:34 | going to be stored in this pageWidth variable.
| | 00:36 | Next line, let's type a JavaScript
conditional statement, if, beginning and
| | 00:42 | ending parentheses, beginning and
ending bracket, open up the brackets.
| | 00:47 | Inside of the parentheses we want to
detect the position x of the cursor so
| | 00:52 | e.pageX > pageWidth/2. So if pageX is
greater than pageWidth/2, we know that the
| | 01:05 | cursor is on the right-hand side of the screen.
| | 01:08 | So what we want to do inside of here is
type $() tick marks for string literal,
| | 01:13 | pound sign ('#tooltip_container').css();.
| | 01:26 | Inside of the parentheses for CSS, two
tick marks for string literal, then set
| | 01:30 | the 'left' property. Outside of the
string literal, but still inside of the
| | 01:34 | parentheses for CSS,
| | 01:35 | I'm going to type comma, another
set of parentheses e.pageX-
| | 01:44 | toolTipWidth, let's come up
here and copy that variable name.
| | 01:48 | Let's paste it inside of there and then plus
20 pixels, outsides of the parentheses,
| | 01:57 | plus sign, two tick marks
for string literal and then px.
| | 02:03 | So what this is going to do is take the
toolTipWidth that we calculated earlier
| | 02:07 | and subtract that from the pageX
position, so that the tooltip will always be
| | 02:11 | offset from the cursor, based on the
width of the actual tooltip itself.
| | 02:15 | Let's come down to the bracket
for the conditional statement.
| | 02:19 | Let's add an else statement with
brackets, and then let's come down here and
| | 02:23 | let's grab the rule we have down here.
| | 02:27 | Let's cut that and paste it
inside of the else statement.
| | 02:31 | So if the pageX is less than the
pageWidth divided by 2, so we know on the
| | 02:36 | left-hand side of the screen, we'll
continue to leave the tooltip_container
| | 02:39 | positioned to the right, which is what
we had before we did the width detection.
| | 02:44 | Let's hit Save, let's come back
to our browser, let's hit Reload.
| | 02:50 | So now in our browser, I'm going to come
up here and rollover a tooltip that's on
| | 02:53 | the left-hand side of the screen, and
we can see that the tooltip aligns to the
| | 02:57 | left and goes further over into the
right-hand side, and if I rollover the
| | 03:01 | tooltip on the right-hand side, the
tooltip aligns to the right and more of the
| | 03:04 | content shows over in the left-hand side.
| | 03:07 | And this is dynamic as well, so if I
come down here and collapse this down so
| | 03:11 | that we have the text over here,
wrapping around the columns, this side will
| | 03:16 | align over to the left and this
side will align over to the right.
| | 03:21 | So now that we're properly detecting
for right and left, in the next movie
| | 03:24 | we're going to add a tooltip into the
logo and we're going to detect for height as well.
| | Collapse this transcript |
| Positioning the tooltip above or below the cursor| 00:00 | So now we're going to add in
detection for the pageHeight. This is going to
| | 00:04 | allow us to do two things;
| | 00:05 | one, we can put the tooltip_
container above the cursor,
| | 00:08 | and two, we can make sure that the
tooltip doesn't touch the top of the browser.
| | 00:11 | Now in order to get a link into the
top of our page let's come back to
| | 00:15 | our index.html file.
| | 00:17 | In the heading area, we have an anchor
link with the class of logo, let's come in
| | 00:21 | here and add our tooltip
properties to this link.
| | 00:24 | First, let's add a second class onto here,
so after logo inside of the value for
| | 00:28 | class, let's hit a space, let's add in tooltip.
| | 00:34 | Now after the attribute for href, let's
add in data-tip-type, equals, two quotes, put in "text".
| | 00:47 | Let's add one more attribute, data-tip-
source, equals, two quotes, and I'll just type in
| | 01:00 | here, "This is the logo".
| | 01:03 | Let's hit Save, now the logo will act
as a tooltip as well, let's come to back
| | 01:08 | to our tooltip.js file.
| | 01:10 | Now inside of here, inside of mousemove,
after we do the pageWidth detection,
| | 01:16 | let's hit a few Returns and what we're
going to do in here is but a standard
| | 01:20 | JavaScript conditional statement.
| | 01:21 | So if () and then beginning and ending
bracket, split that open on the brackets.
| | 01:29 | Inside of the if statement what we
want to do is test for the pageY, so
| | 01:32 | e.pageY, and if that is greater than
100, and we're going to test to see
| | 01:40 | whether this is greater than or lower
than 100 pixels, because in the CSS we've
| | 01:45 | set the header area to take 100 pixels,
so we'll know if the cursor is below
| | 01:49 | the 100 pixel mark.
| | 01:51 | And if it is, what we're going
to do inside up here is target the
| | 01:55 | tooltip_container, so $() tick
marks for string literal, a pound sign
| | 02:03 | ('#tooltip_container'), outside of the
parentheses we're going to type .css ()
| | 02:11 | then a semicolon, inside of the
parentheses another string literal.
| | 02:16 | We're going to type 'top,' outside of
the string literal hit comma, another set
| | 02:22 | of parentheses, outside of the
parentheses plus another string literal 'px'.
| | 02:29 | Now inside of the parentheses, e.pageY-,
then another set of
| | 02:37 | parentheses, now inside of the
innermost parentheses, let's come up here and
| | 02:41 | let's copy toolTipHeight, copy that
variable name, let's come down here, let's
| | 02:46 | paste that and then put +20.
| | 02:48 | So what we're doing here is taking the
height of the tooltip, adding 20 pixels
| | 02:53 | and then subtracting that
from the position of the cursor.
| | 02:56 | Now what this is going to do is
position the tooltip above where the cursor
| | 03:00 | intersects with any HTML
element with the tooltip class.
| | 03:04 | Now let's add an else onto this
condition, so after the bracket type else,
| | 03:09 | another set of brackets.
| | 03:11 | Let's come down here and let's take the
css 'top' property we were using before.
| | 03:17 | Let's cut that to the
clipboard, let's paste it into here.
| | 03:22 | Now to test this let's choose Save,
let's come back up to the browser and hit
| | 03:26 | Reload. Now you'll see our
tooltips are now going above the cursor.
| | 03:32 | Now while I come up here and rollover
the logo, notice that the tooltip is now
| | 03:36 | activated for the logo, but the
position of the tooltip is now showing up
| | 03:40 | underneath the position of the cursor.
| | 03:42 | So now that we're properly detecting
for height and width position, in the
| | 03:45 | next movie we'll hide the tooltip, so
that it only shows when somebody rolls
| | 03:49 | over a tooltip item.
| | Collapse this transcript |
| Hiding the tooltip container until it's triggered by the mouse| 00:00 | Now to hide the tooltip, we are
first going to set a CSS property.
| | 00:03 | Let's come back to tooltip.css.
| | 00:06 | Under the id for tooltip_container,
after border-radius, let's hit a Return.
| | 00:12 | Let's set a property of display, set
that equal to none, choose Save, let's come
| | 00:18 | back to tooltip.js, let's scroll up and
let's look for the mouseover function.
| | 00:25 | Inside up here, after we do our two
detections, one for the data-tip-type and
| | 00:29 | one for the source, let's add in an
instruction to target the tooltip container,
| | 00:34 | dollar sign, parentheses, tick
marks for string literal, pound sign,
| | 00:40 | tooltip_container, outside of the
parentheses .css, parentheses, semicolon,
| | 00:50 | inside of the parentheses two
tick marks for a string literal.
| | 00:54 | First property we are going to set is display.
| | 00:57 | Outside of the string literal, comma,
two tick marks for the value, we are going
| | 01:01 | to set this to 'block.' That's going
to turn that from being a display none,
| | 01:05 | into an object that has a display type.
| | 01:07 | Now that's in the mouseover, let's
scroll down to the mouseout, and inside of
| | 01:14 | the mouseout function, let's target the
tooltip_container again, dollar sign,
| | 01:19 | parentheses, string literal, pound
sign, tooltip_container, outside of the
| | 01:28 | parentheses .css, beginning and ending
parentheses, inside two tick marks, set
| | 01:37 | display, second string literal. We
are going to set that back to none.
| | 01:43 | Then we are also going to
set one more property here.
| | 01:46 | After the parentheses for css, we
are going to set .html, another set of
| | 01:51 | parentheses and a semicolon, two
tick marks inside for a string literal.
| | 01:56 | So in addition to setting the
display to none, we want to wipe out all of
| | 02:00 | the HTML that we have put inside of
that tooltip container. So that when we
| | 02:04 | roll out, everything inside is going
to be set to null, and then we'll set
| | 02:08 | the display to none.
| | 02:09 | To test this, let's choose Save, let's
come back out to the operating system,
| | 02:13 | let's reload this in the browser.
Notice we don't see the tooltip in the lower
| | 02:17 | left-hand corner here, and then I roll
over my tooltips, they pop up, and when I
| | 02:22 | move away, they disappear completely.
| | 02:25 | So now that our tooltip is properly
functioning, next we'll take a look at
| | 02:28 | adding an optional fade in effect,
where we can fade the tooltip in and out
| | 02:32 | based on whether a user
rolls over a tooltip item.
| | Collapse this transcript |
| Setting the tooltip to fade in and out| 00:00 | Next we're going to add a fading effect,
so when we rollover an HTML element
| | 00:04 | with our tooltip class, we're going to
fade the tooltip in, then allow it to
| | 00:08 | move with the mouse and
then fade it out on mouseout.
| | 00:12 | So to add in this behavior, let's come
up to the mouseover function inside of
| | 00:16 | the JavaScript file, let's come down
to where we're setting tooltip_container
| | 00:20 | display to 'block' on mouseover, and
what we're going to do in here is set an
| | 00:25 | additional CSS property.
| | 00:26 | Now to set more then one CSS property,
we need to put the properties inside a
| | 00:30 | set of brackets, inside
of the parentheses for CSS.
| | 00:33 | So after the beginning parentheses,
let's put in a beginning bracket, get your
| | 00:38 | cursor before the ending parentheses,
and put in an ending bracket, and then
| | 00:42 | we'll come back and
change that comma to a colon.
| | 00:44 | So the first property we're setting
is display, let's hit a comma, two more
| | 00:50 | tick marks for another string literal,
let's put opacity, outside of the
| | 00:55 | string literal, colon 0.
| | 00:58 | So what we're doing here is in
addition to setting the display to 'block,' so
| | 01:02 | that it actually shows up in the page,
we're setting the transparency to 0, so
| | 01:06 | we can't see it yet.
| | 01:07 | Then outside of the parentheses for CSS
and before the semicolon, we're going to
| | 01:11 | add another jQuery statement, .animate,
beginning and ending parentheses. Inside
| | 01:19 | of the parentheses we'll add a
beginning and ending bracket.
| | 01:22 | Inside of the brackets we want to
animate the opacity setting, so we'll type
| | 01:26 | opacity:1, then outside of the
brackets but still inside of the parentheses,
| | 01:32 | comma 250 milliseconds.
| | 01:36 | So on mouseover we're going to set the
display to block, set the opacity to 0,
| | 01:40 | and then animate the opacity up to 1 or 100%
over the course of one quarter of the second.
| | 01:45 | Now to fade our tooltip back out,
let's scroll down in our JavaScript file,
| | 01:50 | let's find the mouseout function,
let's add a few returns in here.
| | 01:56 | So this particular statement here
tooltip container that sets the display to
| | 01:59 | none, once we set the display to none,
the tooltip is just going to pop off the
| | 02:04 | screen. It's not going to actually
animate down, so we're going to need to
| | 02:07 | animate the opacity back down to 0
and then set the display to 'none.'
| | 02:11 | So to do this let's add few Returns
above the tooltip_container. Let's start by
| | 02:17 | targeting the tooltip_container again,
so dollar sign, parentheses, tick marks for
| | 02:21 | string literal, pound sign, tooltip_
container, outside of the parentheses
| | 02:29 | .animate. Now let's add a parentheses,
then a semicolon inside of animate,
| | 02:37 | beginning and ending bracket, opacity:0,
outside of the brackets, comma 250 for
| | 02:46 | 250 milliseconds. Then we're going
to hit another comma, type in the word
| | 02:52 | function, another set of parentheses,
another set of brackets, and then let's
| | 02:57 | split that open on the brackets.
| | 02:59 | So this function here is
referred to as a callback function.
| | 03:02 | So what this means is after the
animation happens over 250 milliseconds,
| | 03:07 | anything we put inside of
here will then be executed.
| | 03:09 | So we're going to want to come down here
and cut this line that sets the display
| | 03:14 | to 'none,' come inside of this
callback function and then paste that in here.
| | 03:20 | So the display setting to none will
not happen until after the tooltip
| | 03:23 | animates back down to 0. So to test
this, let's hit Save, make sure all your
| | 03:28 | files are saved. Let's come back to our
operating system and let's reload this in our browser.
| | 03:34 | So now inside the browser, I'll rollover
a tooltip trigger, the tooltip fades in,
| | 03:39 | moves with my mouse and then fades away
when I move out, and this works for all
| | 03:44 | of the tooltips on the screen.
| | 03:47 | So that completes adding a
tooltip into your website with jQuery.
| | 03:50 | In the next movie, we'll talk about
some CSS properties that may interfere with
| | 03:54 | having elements track with the
mouse and how you can correct for that.
| | Collapse this transcript |
|
|
5. A Mouse Position "Gotcha"Accounting for other CSS-positioned elements| 00:00 | Now if you're putting your tooltip
into an existing website, one problem that
| | 00:03 | might pop up is that the tooltip_
container is not actually matching the position
| | 00:07 | of the mouse cursor.
| | 00:08 | This can happen if you have an HTML
element that is the parent of your
| | 00:12 | tooltip_container that has
position properties on it.
| | 00:16 | So to demonstrate what's happening here,
I'm going to add the position relative
| | 00:20 | attribute onto my page container.
| | 00:22 | So this is going to do is now be
tooltip_container will orient itself based
| | 00:26 | on the page container.
| | 00:27 | The problem that arises here is that
the browser is calculating the X, Y
| | 00:32 | position of the mouse, based on the viewport,
or the overall size or body tag of the web page.
| | 00:37 | So now we have a disconnect between the two.
| | 00:39 | So to show you what that might look like,
I'm going to open this up in a browser.
| | 00:43 | Now when the browser is small and I
roll over these tooltips, you might not be
| | 00:47 | able to notice that the
tooltip isn't aligned properly.
| | 00:50 | But if I come in here and open a web
browser up really wide, and now roll over
| | 00:54 | these items, you'll see that the
offset is actually pretty substantial.
| | 00:58 | So when I roll over these tooltips, what
you'll notice is the amount of distance
| | 01:01 | that this is off, matches the amount of
distance between the edge of the browser
| | 01:06 | and the edge of my page container.
| | 01:09 | So it's this value that creates
that discrepancy. Again, the browser is
| | 01:12 | calculating from the viewport, the tooltip
is now positioning itself based on the parent.
| | 01:18 | So my first recommendation is to always
put the tooltip_container outside of any
| | 01:22 | HTML elements that have absolute positioning.
| | 01:25 | However, if it's a website that you're
working on and you don't have access to
| | 01:28 | put the tooltip in a place that's
not affected by position, the jQuery
| | 01:32 | instruction you want to
look up is called offset.
| | 01:35 | So what you can do is detect the offset
of the parent that's doing the absolute
| | 01:39 | positioning, and then calculate or
adjust the position of your tooltip in very
| | 01:44 | much the same way we've
calculated the height and width positions.
| | 01:47 | Now this may take a few times and some
trial and error to get the tooltip to
| | 01:52 | align properly, if you're
going to be overriding the offset.
| | 01:55 | But once you figure that out you're
going to get the exact same user experience
| | 01:59 | that we had with the template
that we used in this course.
| | 02:01 | So now that we've completed our tooltip,
in the next movie we will take a look
| | 02:05 | at where you might want to go from here.
| | Collapse this transcript |
|
|
Where to Go from HereExploring resources for additional menu plug-ins| 00:00 | Now in this course we touched on
a couple different technologies.
| | 00:02 | The first one is HTML5. The layout
that I provided as a starting point uses
| | 00:07 | HTML5 and we also added in a Google
shiv, which enables HTML5 for older
| | 00:12 | browsers, such as IE 7 and 8.
| | 00:14 | And if you take a look at the courses
that I have on lynda.com, there is a
| | 00:17 | Create an HTML5 Video Gallery; this
particular course walks you step-by-step
| | 00:22 | through adding in the Google shiv
and showing you exactly how that HTML5
| | 00:26 | translates to older browsers.
| | 00:28 | The other thing we did in this course was
we took a look at different CSS3 properties.
| | 00:32 | We looked at the RGBA color space to
do Alpha, we also look that rounded
| | 00:36 | corners, and so I also recommend the
CSS3 First Look on the lynda.com library to
| | 00:42 | get a sense of what's new in CSS3.
| | 00:45 | And then finally, we added in a fade
effect into our tooltip. This as part of a
| | 00:50 | rollover animation, and I have the
examples of additional animated rollovers
| | 00:53 | that you can create using jQuery
in combination with HTML and CSS.
| | 00:58 | So with that, that concludes
Creating a Tooltip for your web site using
| | 01:01 | jQuery, and I really
appreciate you watching my course.
| | Collapse this transcript |
|
|
