From the course: Learning Foundation 6
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Solution: Add tooltips to a site - Foundation Tutorial
From the course: Learning Foundation 6
Solution: Add tooltips to a site
- [Instructor] So, how did you do? Did you manage to get a working tooltip here for the button? When you roll over this button do you actually get a little tooltip that appears that says 40 great recipes here? Well, I'll show you how I coded it. So if you hop back on into index.html, we're going to scroll on down to where that button occurs, there. Here on line 62 is that particular line of code, and so what we're going to do to this is we're going to add a whole bunch of stuff to make this work. So, first of all, most notably, we're going to add to this a title. That's a standard HTML5 attribute, and that is where our text is going to come from. So 40 great recipes here. So that's a really simple thing that you can do to add that. Then the next thing that we want to do is actually turn this into a tooltip. So to do that, we're going to add the attribute data-tooltip. That's all we need to do for that. Next we're going to add some additional accessibility attributes to this, so…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.