Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Inside of the attr two tick marks for a string literal, data-tip-type. So for each HTML element with a tooltip class that triggers this function, this refers to the actual item that was rolled over. So we're going to check the attribute of each one of those items. So after the parentheses hit a space, two equal signs, another string literal and then type in text. So if the item that we moused over has the data-tip-type set to text, we're going to do this instruction here.
So inside of these brackets we're going to target the tooltip_container and set the HTML. So start with a dollar sign, parentheses, inside of the parenthesis two more tick marks, pound sign, tooltip_container. Outside of the parenthesis .html, parenthesis, then a semicolon. Inside of the parenthesis for html dollars sign, parenthesis, type the word this inside.
Outside of the parenthesis .attr for attribute, another set of parenthesis, tick marks inside for a string literal, data-tip-source. So what this is doing is targeting the tooltip_container and setting the html inside to the value of the item that was rolled over whatever the data-tip-source value is set to. Now to test this, let's save our file, let's come back to the index.html file, let's choose File > Save All, again just to make sure that everything has been saved.
Let's go to the File Manu > Preview in Browser. Once this comes up in a browser hit reload. Now we see our tooltip down here with our Test text. I'll come up here and rollover the text- based tooltip and then notice that the HTML has been changed to say this is the tip text, matching exactly what we put inside of the data-tip-source attribute of the actual link that just triggered that. So now that we're properly finding and testing for text-based tooltips, next we'll work on adding some HTML for the HTML format of tooltips.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96312 Viewers
56 Video lessons · 110074 Viewers
71 Video lessons · 78879 Viewers
131 Video lessons · 37852 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.