Lab 7 (Session 3) — Tooltips & Progress Animations

Master Tooltip Positioning & Animated Skill Meters (≈ 60 min)

Overview

This lab focuses on creating interactive tooltip badges and animated progress indicators. Students will build two distinct projects: (1) icon buttons with animated tooltip badges showing notifications, and (2) skill progress bars with animated fill effects and percentage displays.

Duration: Approximately 60 minutes

Learning Objectives

By the end of this lab, students will be able to:

  • Create tooltip elements using pseudo-elements and data attributes.
  • Position tooltips accurately using absolute positioning and transforms.
  • Implement notification badges with pulse animations.
  • Create animated progress bars with CSS transitions.
  • Use CSS animations with @keyframes for continuous effects.
  • Apply clip-path for circular progress indicators.
  • Combine pseudo-elements for tooltip arrows and shadows.
  • Build responsive tooltip systems with multiple positions.

Task 1 — Icon Buttons with Animated Tooltip Badges

Create Icon Buttons with Notification Badges and Tooltips

Build a set of four icon buttons (Messages, Notifications, Settings, Profile) with animated notification badges and hover tooltips. This exercise demonstrates tooltip positioning, badge animations using @keyframes, and the use of CSS data attributes for dynamic content.

Task 1: 📸 View Reference Picture

💡 Important Tip: Tooltips use CSS data attributes and ::before pseudo-elements. Hover over each icon to see the tooltip!

Part A: Tooltip Container Setup

  1. For .tooltip-icons, set display to flex
  2. For .tooltip-icons, set justify-content to center
  3. For .tooltip-icons, set gap to 40px
  4. For .tooltip-icons, set padding to 80px 0

Part B: Icon Button Base Styling

  1. For .icon-btn, set position to relative
  2. For .icon-btn, set width to 60px
  3. For .icon-btn, set height to 60px
  4. For .icon-btn, set background to linear-gradient(135deg, #667eea 0%, #764ba2 100%)
  5. For .icon-btn, set border-radius to 50%
  6. For .icon-btn, set display to flex
  7. For .icon-btn, set align-items to center
  8. For .icon-btn, set justify-content to center
  9. For .icon-btn, set cursor to pointer
  10. For .icon-btn, set transition to transform 0.3s ease

Part C: Icon Button Hover Effect

  1. For .icon-btn:hover, set transform to translateY(-5px)
  2. For .icon-btn i, set font-size to 24px
  3. For .icon-btn i, set color to #fff

Part D: Notification Badge Styling

  1. For .badge, set position to absolute
  2. For .badge, set top to -5px
  3. For .badge, set right to -5px
  4. For .badge, set width to 22px
  5. For .badge, set height to 22px
  6. For .badge, set background to #ff4757
  7. For .badge, set border-radius to 50%
  8. For .badge, set color to #fff
  9. For .badge, set font-size to 11px
  10. For .badge, set font-weight to 700
  11. For .badge, set display to flex
  12. For .badge, set align-items to center
  13. For .badge, set justify-content to center
  14. For .badge, set animation to pulse 2s infinite

Part E: Pulse Animation

  1. Create @keyframes pulse with 0% having box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7)
  2. At 70%, set box-shadow to 0 0 0 10px rgba(255, 71, 87, 0)
  3. At 100%, set box-shadow to 0 0 0 0 rgba(255, 71, 87, 0)

Part F: Tooltip Base Styling

  1. For .icon-btn::before, set content to attr(data-tooltip)
  2. For .icon-btn::before, set position to absolute
  3. For .icon-btn::before, set bottom to 100%
  4. For .icon-btn::before, set left to 50%
  5. For .icon-btn::before, set transform to translateX(-50%) translateY(-10px)
  6. For .icon-btn::before, set background to #2d3748
  7. For .icon-btn::before, set color to #fff
  8. For .icon-btn::before, set padding to 8px 12px
  9. For .icon-btn::before, set border-radius to 6px
  10. For .icon-btn::before, set font-size to 13px
  11. For .icon-btn::before, set white-space to nowrap
  12. For .icon-btn::before, set opacity to 0
  13. For .icon-btn::before, set pointer-events to none
  14. For .icon-btn::before, set transition to all 0.3s ease

Part G: Tooltip Arrow

  1. For .icon-btn::after, set content to ""
  2. For .icon-btn::after, set position to absolute
  3. For .icon-btn::after, set bottom to 100%
  4. For .icon-btn::after, set left to 50%
  5. For .icon-btn::after, set transform to translateX(-50%)
  6. For .icon-btn::after, set border-width to 6px
  7. For .icon-btn::after, set border-style to solid
  8. For .icon-btn::after, set border-color to #2d3748 transparent transparent transparent
  9. For .icon-btn::after, set opacity to 0
  10. For .icon-btn::after, set transition to all 0.3s ease

Part H: Show Tooltip on Hover

  1. For .icon-btn:hover::before, set opacity to 1
  2. For .icon-btn:hover::before, set transform to translateX(-50%) translateY(-15px)
  3. For .icon-btn:hover::after, set opacity to 1
5
12
1

Key Learning Points:

  • attr(data-tooltip) allows CSS to read HTML data attributes for dynamic content.
  • Tooltips use ::before for the text box and ::after for the arrow.
  • @keyframes creates reusable animation sequences that can be applied with animation.
  • Pulse effect uses expanding box-shadow with decreasing opacity for a ripple effect.
  • pointer-events: none prevents tooltips from interfering with mouse interactions.
  • white-space: nowrap keeps tooltip text on a single line.

Tip: Try adding tooltips in different positions (top, bottom, left, right) by adjusting the positioning properties!

Task 2 — Animated Skill Progress Bars

Create Progress Bars with Animated Fill and Percentage Display

Build a set of four skill progress bars (HTML, CSS, JavaScript, React) with smooth animated fill effects and percentage displays. This exercise demonstrates CSS transitions for width changes, pseudo-elements for percentage labels, and gradient backgrounds for visual appeal.

Task 2: 📸 View Reference Picture

💡 Important Tip: Progress bars use CSS custom properties (--progress) for dynamic widths. Hover to see them fill!

Part A: Skills Container Setup

  1. For .skills-container, set max-width to 600px
  2. For .skills-container, set margin to 0 auto
  3. For .skills-container, set padding to 60px 40px

Part B: Skill Item Layout

  1. For .skill-item, set margin-bottom to 35px

Part C: Skill Header Styling

  1. For .skill-header, set display to flex
  2. For .skill-header, set justify-content to space-between
  3. For .skill-header, set align-items to center
  4. For .skill-header, set margin-bottom to 12px

Part D: Skill Name and Icon

  1. For .skill-name, set display to flex
  2. For .skill-name, set align-items to center
  3. For .skill-name, set gap to 10px
  4. For .skill-name, set font-size to 16px
  5. For .skill-name, set font-weight to 600
  6. For .skill-name, set color to #2d3748
  7. For .skill-name i, set font-size to 20px
  8. For .skill-name i, set color to #667eea

Part E: Skill Percentage Display

  1. For .skill-percent, set font-size to 14px
  2. For .skill-percent, set font-weight to 700
  3. For .skill-percent, set color to #667eea

Part F: Progress Bar Background

  1. For .progress-bar, set position to relative
  2. For .progress-bar, set width to 100%
  3. For .progress-bar, set height to 12px
  4. For .progress-bar, set background to #e2e8f0
  5. For .progress-bar, set border-radius to 10px
  6. For .progress-bar, set overflow to hidden

Part G: Progress Fill Animation

  1. For .progress-fill, set height to 100%
  2. For .progress-fill, set width to 0
  3. For .progress-fill, set background to linear-gradient(90deg, #667eea 0%, #764ba2 100%)
  4. For .progress-fill, set border-radius to 10px
  5. For .progress-fill, set transition to width 1.5s ease
  6. For .progress-fill, set position to relative

Part H: Progress Fill Glow Effect

  1. For .progress-fill::after, set content to ""
  2. For .progress-fill::after, set position to absolute
  3. For .progress-fill::after, set top to 0
  4. For .progress-fill::after, set left to 0
  5. For .progress-fill::after, set width to 100%
  6. For .progress-fill::after, set height to 100%
  7. For .progress-fill::after, set background to linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)
  8. For .progress-fill::after, set animation to shimmer 2s infinite

Part I: Shimmer Animation

  1. Create @keyframes shimmer with 0% having transform: translateX(-100%)
  2. At 100%, set transform to translateX(100%)

Part J: Trigger Animation on Hover

  1. For .skills-container:hover .progress-fill, set width to var(--progress)
HTML
90%
CSS
85%
JavaScript
75%
React
70%

Key Learning Points:

  • CSS custom properties (--progress) can be set inline in HTML and used in CSS with var().
  • transition: width 1.5s ease creates smooth width animations for progress bars.
  • Shimmer effect uses a gradient overlay with translateX animation.
  • overflow: hidden on the progress bar container keeps the fill within bounds.
  • Gradient backgrounds can be animated using @keyframes and transform.
  • Triggering animations on parent hover affects all child elements with the selector.

Tip: Try changing the --progress values or adding more skills with different percentages!

Questions to Answer

Please answer the following questions based on your understanding of the tasks. Write your answers in the designated areas below:

📝 Important: Write your answers directly in the HTML source code by editing the content inside the <p> tags within each answer box below. Replace the placeholder text with your own answers.

Question 1: Tooltip Positioning

In Task 1 (Icon Tooltip Badges), explain how the tooltip is positioned above the button. What role do bottom: 100% and transform: translateX(-50%) play in the positioning?

Your Answer:

Type your answer here...

The bottom: 100% refers to the height of the button itself, placing the tooltip above the top edge of the button. transform: translateX(-50%) horizontally centering the tooltip above the button. The translateX(-50%) moves the tooltip to the left by 50% of its own width.

Question 2: CSS Custom Properties

In Task 2 (Animated Skill Progress Bars), how are CSS custom properties (--progress) used to control the width of each progress bar? Why is this approach better than hard-coding the width values in CSS?

Your Answer:

Type your answer here...

It is used with width: var(--progress);. This value can be adjusted dynamically in HTML file, allowing each progress bar to have a different width based on the specified percentage. It provides flexibility that a modification can be directly changed in HTML or JavaScript instead of modify CSS file. It also reduce the redundancy that no need to hard code a value for each progress bar that a uniform rule can reduce dupelicate code.

What to Submit

Upload the following to the BB:

  • index.html and styles.css (with your answers to the questions filled in)
  • 2 screenshots showing:
    • Task 1: Icon buttons with tooltips and animated badges
    • Task 2: Skill progress bars with animated fills

Note: Make sure you have completed both tasks and answered the questions in the "Questions to Answer" section before submitting.