[UI] Add Informative Tooltips for Better User Guidance

[JohanDevl]

UI/UX Issue Description

Add pure CSS tooltips to provide contextual information and keyboard shortcuts for various interface elements, improving user discoverability and guidance.

Current Behavior

Many buttons and interface elements lack contextual help. Users must guess functionality or discover keyboard shortcuts through trial and error.

Proposed Improvement

• Add CSS-only tooltips (no heavy JavaScript) on buttons and interactive elements
• Display keyboard shortcuts on hover for relevant buttons
• Provide contextual information about features and functionality
• Include helpful hints for new users

User Experience Impact

• Affected Users: All users, especially new users
• Frequency of Use: Frequently during initial learning and occasional reference
• User Pain Points: Lack of guidance, hidden keyboard shortcuts, unclear button functions

Improvement Category

• Navigation Enhancement
• Visual Design
• Mobile Responsiveness
• Accessibility
• Performance/Loading
• Search/Filter Functionality
• Question Display
• Export Features
• Error Handling

Technical Considerations

• Affected Files: styles.css, index.html (data-tooltip attributes)
• Browser Compatibility: CSS pseudo-elements supported by all modern browsers
• Responsive Design: Tooltips should adapt on mobile (touch-friendly)
• Accessibility: Compatible with screen readers, proper ARIA attributes

Implementation Suggestions

• HTML Changes: Add data-tooltip attributes to elements needing tooltips
• CSS Changes: Pure CSS tooltips using ::before and ::after pseudo-elements
• JavaScript Changes: Minimal or none, perhaps toggle for mobile touch events

Examples

Buttons that would benefit from tooltips:

• Navigation buttons (show keyboard shortcuts)
• Settings buttons (explain functionality)
• Export/import buttons (describe formats)
• Question toolbar buttons (explain actions)

Acceptance Criteria

• CSS-only tooltip system implemented
• Keyboard shortcuts displayed in relevant tooltips
• Mobile-friendly tooltip behavior
• Consistent styling with current theme
• No performance impact on page load

Additional Context

This enhancement improves user onboarding and reduces the learning curve without adding complexity or external dependencies.