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

Solution: Add tooltips to a site - Foundation Tutorial

From the course: Learning Foundation 6

Start my 1-month free trial

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…

Contents