Skip to content

Add tooltips to dashboard statistics cards #46

@AnjanJ

Description

@AnjanJ

Description

Add helpful tooltips to dashboard statistics cards to explain what each metric means and how it's calculated.

Current Behavior

  • Dashboard shows cards with numbers (Total Errors, Resolved, Unresolved, etc.)
  • No explanation of what these numbers represent
  • Users may not understand metrics like MTTR

Desired Behavior

Add tooltips (hover popups) to each stat card that explain:

  • Total Errors: "Total number of unique error types logged"
  • Resolved: "Errors marked as resolved by team members"
  • Unresolved: "Errors that still need attention"
  • Critical: "Errors with critical severity level"
  • Error Rate: "Average errors per day over last 7 days"
  • MTTR: "Mean Time To Resolution - Average time between error occurrence and resolution"

Implementation Hints

  • Use Bootstrap tooltips (already included)
  • Add data-bs-toggle="tooltip" attribute
  • Add data-bs-title="Explanation text" attribute
  • Add info icon (ℹ️ or FontAwesome icon) next to stat title
  • Initialize tooltips with JavaScript: new bootstrap.Tooltip(el)

Files to Modify

  • /app/views/rails_error_dashboard/dashboard/show.html.erb - Add tooltip attributes
  • Layout or JavaScript file - Initialize Bootstrap tooltips

Example Code

<div class="card">
  <h5>
    Total Errors
    <i class="bi bi-info-circle" 
       data-bs-toggle="tooltip" 
       data-bs-title="Total number of unique error types logged"></i>
  </h5>
  <div class="display-4"><%= @stats[:total_errors] %></div>
</div>

Good First Issue Because

  • Small, focused change
  • Improves documentation and UX
  • Primarily HTML changes
  • Easy to test (hover and see tooltip)

Nice to Have

  • Click to show tooltip on mobile (no hover)
  • Link to documentation from tooltip
  • Different tooltip placement (top, bottom, left, right) for better UX

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or requestgood first issueGood for newcomers

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions