Join Jen Kramer for an in-depth discussion in this video Solution: Add tooltips to a site, part of Learning Foundation 6.
- [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 aria-haspopup,…all one word, equals true.…
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus
Skill Level Beginner
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Overview of Foundation 6
2. The XY Grid System
3. CSS Overview
4. Navigation Systems
Next steps1m 33s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.