Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now we're going to add in detection for the pageHeight. This is going to allow us to do two things; one, we can put the tooltip_ container above the cursor, and two, we can make sure that the tooltip doesn't touch the top of the browser. Now in order to get a link into the top of our page let's come back to our index.html file. In the heading area, we have an anchor link with the class of logo, let's come in here and add our tooltip properties to this link. First, let's add a second class onto here, so after logo inside of the value for class, let's hit a space, let's add in tooltip.
Now after the attribute for href, let's add in data-tip-type, equals, two quotes, put in "text". Let's add one more attribute, data-tip- source, equals, two quotes, and I'll just type in here, "This is the logo". Let's hit Save, now the logo will act as a tooltip as well, let's come to back to our tooltip.js file.
And if it is, what we're going to do inside up here is target the tooltip_container, so $() tick marks for string literal, a pound sign ('#tooltip_container'), outside of the parentheses we're going to type .css () then a semicolon, inside of the parentheses another string literal. We're going to type 'top,' outside of the string literal hit comma, another set of parentheses, outside of the parentheses plus another string literal 'px'.
Now inside of the parentheses, e.pageY-, then another set of parentheses, now inside of the innermost parentheses, let's come up here and let's copy toolTipHeight, copy that variable name, let's come down here, let's paste that and then put +20. So what we're doing here is taking the height of the tooltip, adding 20 pixels and then subtracting that from the position of the cursor. Now what this is going to do is position the tooltip above where the cursor intersects with any HTML element with the tooltip class.
Now let's add an else onto this condition, so after the bracket type else, another set of brackets. Let's come down here and let's take the css 'top' property we were using before. Let's cut that to the clipboard, let's paste it into here. Now to test this let's choose Save, let's come back up to the browser and hit Reload. Now you'll see our tooltips are now going above the cursor. Now while I come up here and rollover the logo, notice that the tooltip is now activated for the logo, but the position of the tooltip is now showing up underneath the position of the cursor.
So now that we're properly detecting for height and width position, in the next movie we'll hide the tooltip, so that it only shows when somebody rolls over a tooltip item.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102133 Viewers
61 Video lessons · 88852 Viewers
71 Video lessons · 72665 Viewers
56 Video lessons · 104305 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.