add tooltips
· 1 year ago
16577b6e28204d804156546b7fcd31080798c15d
Parent:
83ac300e0
1 file changed +68 −38
- scrum.html +68 −38
Diff
--- a/scrum.html +++ b/scrum.html @@ -279,6 +279,7 @@ border-radius: 5px; /* Softer radius */ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-weight: 600; + cursor: help; /* Indicate a tooltip is available */ } .row > * { @@ -362,7 +363,7 @@ </head> <body> <header class="page-header"> - <h1><i class="bi bi-recycle"></i> The Scrum Framework Cheatsheet</h1> + <h1><i class="bi bi-recycle" data-bs-toggle="tooltip" data-bs-title="Scrum: An iterative and incremental approach for agile project management."></i> The Scrum Framework Cheatsheet</h1> <p class="lead"> An interactive guide to Scrum's core principles, roles, events, and artifacts for delivering value through agile practices. @@ -376,11 +377,11 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-definition" id="card-scrum-definition"> <div class="card-body"> - <h5><i class="bi bi-patch-question-fill"></i> Definition</h5> + <h5><i class="bi bi-patch-question-fill" data-bs-toggle="tooltip" data-bs-title="Explains the fundamental nature and purpose of the Scrum framework."></i> Definition</h5> <div class="card-content-wrapper"> <p class="summary"> Scrum is a lightweight framework that helps people, teams, and organizations generate value through - <span class="term">adaptive solutions</span> for <span class="term">complex problems</span>. It's an + <span class="term" data-bs-toggle="tooltip" data-bs-title="Solutions designed to evolve based on feedback and changing requirements, rather than being fixed upfront.">adaptive solutions</span> for <span class="term" data-bs-toggle="tooltip" data-bs-title="Problems with unknown or changing requirements, high uncertainty, and interdependencies, where an empirical approach is beneficial.">complex problems</span>. It's an iterative and incremental approach. </p> <button @@ -390,6 +391,7 @@ data-bs-target="#collapseScrumDefinition" aria-expanded="false" aria-controls="collapseScrumDefinition" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Scrum Definition" > Details <i class="bi bi-chevron-down"></i> </button> @@ -412,11 +414,11 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-pillars" id="card-scrum-pillars"> <div class="card-body"> - <h5><i class="bi bi-columns-gap"></i> Empirical Pillars</h5> + <h5><i class="bi bi-columns-gap" data-bs-toggle="tooltip" data-bs-title="Highlights the foundational principles of Transparency, Inspection, and Adaptation that guide Scrum."></i> Empirical Pillars</h5> <div class="card-content-wrapper"> <p class="summary"> - Scrum is based on <span class="term">Transparency</span>, <span class="term">Inspection</span>, and - <span class="term">Adaptation</span> to navigate complexity and manage risk. + Scrum is based on <span class="term" data-bs-toggle="tooltip" data-bs-title="Ensuring that all aspects of the process and work are visible to those performing and receiving the work. Key for inspection.">Transparency</span>, <span class="term" data-bs-toggle="tooltip" data-bs-title="Frequently examining Scrum artifacts and progress towards goals to detect undesirable variances or problems. Often occurs during Scrum events.">Inspection</span>, and + <span class="term" data-bs-toggle="tooltip" data-bs-title="Adjusting the process or the material being produced if inspection reveals deviations or unacceptable outcomes. Key for continuous improvement.">Adaptation</span> to navigate complexity and manage risk. </p> <button class="btn btn-sm details-toggle" @@ -425,6 +427,7 @@ data-bs-target="#collapseScrumPillars" aria-expanded="false" aria-controls="collapseScrumPillars" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Empirical Pillars" > Details <i class="bi bi-chevron-down"></i> </button> @@ -457,13 +460,13 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-values" id="card-scrum-values"> <div class="card-body"> - <h5><i class="bi bi-heart-fill"></i> Scrum Values</h5> + <h5><i class="bi bi-heart-fill" data-bs-toggle="tooltip" data-bs-title="Details the core values (Commitment, Focus, Openness, Respect, Courage) essential for a successful Scrum Team."></i> Scrum Values</h5> <div class="card-content-wrapper"> <p class="summary"> Successful use of Scrum depends on people becoming more proficient in living five values: - <span class="term">Commitment</span>, <span class="term">Focus</span>, - <span class="term">Openness</span>, <span class="term">Respect</span>, and - <span class="term">Courage</span>. + <span class="term" data-bs-toggle="tooltip" data-bs-title="The Scrum Team's dedication to achieving its goals and supporting its members.">Commitment</span>, <span class="term" data-bs-toggle="tooltip" data-bs-title="The Scrum Team's concentration on the work of the Sprint to make the best possible progress toward the Sprint Goal.">Focus</span>, + <span class="term" data-bs-toggle="tooltip" data-bs-title="Willingness of the Scrum Team and stakeholders to be candid about all work and challenges.">Openness</span>, <span class="term" data-bs-toggle="tooltip" data-bs-title="Team members respecting each other as capable, independent individuals, and being respected by others.">Respect</span>, and + <span class="term" data-bs-toggle="tooltip" data-bs-title="The Scrum Team members having the bravery to do the right thing and to work on challenging problems.">Courage</span>. </p> <button class="btn btn-sm details-toggle" @@ -472,6 +475,7 @@ data-bs-target="#collapseScrumValues" aria-expanded="false" aria-controls="collapseScrumValues" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Scrum Values" > Details <i class="bi bi-chevron-down"></i> </button> @@ -514,10 +518,10 @@ <div class="col-lg-6 col-md-6"> <div class="info-card card-why" id="card-scrum-benefits"> <div class="card-body"> - <h5><i class="bi bi-graph-up-arrow"></i> Key Benefits</h5> + <h5><i class="bi bi-graph-up-arrow" data-bs-toggle="tooltip" data-bs-title="Outlines the main advantages of adopting the Scrum framework."></i> Key Benefits</h5> <div class="card-content-wrapper"> <p class="summary"> - Scrum enables <span class="term">faster value delivery</span>, increased quality, enhanced + Scrum enables <span class="term" data-bs-toggle="tooltip" data-bs-title="Consistently delivering usable product increments quickly, allowing for early feedback and return on investment.">faster value delivery</span>, increased quality, enhanced productivity, better stakeholder satisfaction, adaptability, and improved team morale. </p> <button @@ -527,6 +531,7 @@ data-bs-target="#collapseScrumBenefits" aria-expanded="false" aria-controls="collapseScrumBenefits" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Key Benefits of Scrum" > Details <i class="bi bi-chevron-down"></i> </button> @@ -568,10 +573,10 @@ <div class="col-lg-6 col-md-6"> <div class="info-card card-why" id="card-scrum-when-effective"> <div class="card-body"> - <h5><i class="bi bi-lightbulb-fill"></i> When Scrum Shines</h5> + <h5><i class="bi bi-lightbulb-fill" data-bs-toggle="tooltip" data-bs-title="Identifies the types of projects and environments where Scrum is most effective."></i> When Scrum Shines</h5> <div class="card-content-wrapper"> <p class="summary"> - Scrum is particularly effective for <span class="term">complex projects</span> where requirements + Scrum is particularly effective for <span class="term" data-bs-toggle="tooltip" data-bs-title="Projects characterized by evolving requirements, uncertainty, and the need for frequent adaptation, where Scrum's empirical approach excels.">complex projects</span> where requirements evolve, frequent feedback is crucial, and cross-functional collaboration is needed. </p> <button @@ -581,6 +586,7 @@ data-bs-target="#collapseScrumWhenEffective" aria-expanded="false" aria-controls="collapseScrumWhenEffective" + data-bs-toggle="tooltip" data-bs-title="Toggle details for When Scrum is Most Effective" > Details <i class="bi bi-chevron-down"></i> </button> @@ -608,10 +614,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-team" id="card-product-owner"> <div class="card-body"> - <h5><i class="bi bi-person-badge-fill"></i> Product Owner</h5> + <h5><i class="bi bi-person-badge-fill" data-bs-toggle="tooltip" data-bs-title="Describes the Product Owner's role in maximizing product value and managing the Product Backlog."></i> Product Owner</h5> <div class="card-content-wrapper"> <p class="summary"> - Accountable for <span class="term">maximizing product value</span> resulting from the Scrum Team's + Accountable for <span class="term" data-bs-toggle="tooltip" data-bs-title="The Product Owner's primary accountability: ensuring the product delivers the most benefit and utility to users and stakeholders.">maximizing product value</span> resulting from the Scrum Team's work. Manages the Product Backlog. </p> <button @@ -621,6 +627,7 @@ data-bs-target="#collapseProductOwner" aria-expanded="false" aria-controls="collapseProductOwner" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Product Owner" > Details <i class="bi bi-chevron-down"></i> </button> @@ -644,10 +651,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-team" id="card-scrum-master"> <div class="card-body"> - <h5><i class="bi bi-person-gear"></i> Scrum Master</h5> + <h5><i class="bi bi-person-gear" data-bs-toggle="tooltip" data-bs-title="Explains the Scrum Master's role in coaching the team and ensuring Scrum is understood and enacted."></i> Scrum Master</h5> <div class="card-content-wrapper"> <p class="summary"> - Accountable for establishing Scrum and the <span class="term">Scrum Team’s effectiveness</span>. A + Accountable for establishing Scrum and the <span class="term" data-bs-toggle="tooltip" data-bs-title="The Scrum Master's focus: helping the team improve its practices, collaboration, and adherence to Scrum principles for optimal performance.">Scrum Team’s effectiveness</span>. A true leader who serves the team and organization. </p> <button @@ -657,6 +664,7 @@ data-bs-target="#collapseScrumMaster" aria-expanded="false" aria-controls="collapseScrumMaster" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Scrum Master" > Details <i class="bi bi-chevron-down"></i> </button> @@ -679,10 +687,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-team" id="card-developers"> <div class="card-body"> - <h5><i class="bi bi-people-workspace"></i> Developers</h5> + <h5><i class="bi bi-people-workspace" data-bs-toggle="tooltip" data-bs-title="Details the Developers' role in creating a usable Increment each Sprint."></i> Developers</h5> <div class="card-content-wrapper"> <p class="summary"> - The people committed to creating any aspect of a <span class="term">usable Increment</span> each + The people committed to creating any aspect of a <span class="term" data-bs-toggle="tooltip" data-bs-title="A concrete step toward the Product Goal; a version of the product that is potentially shippable and meets the Definition of Done.">usable Increment</span> each Sprint. A cross-functional group. </p> <button @@ -692,6 +700,7 @@ data-bs-target="#collapseDevelopers" aria-expanded="false" aria-controls="collapseDevelopers" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Developers" > Details <i class="bi bi-chevron-down"></i> </button> @@ -723,10 +732,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-events" id="card-sprint"> <div class="card-body"> - <h5><i class="bi bi-arrow-repeat"></i> The Sprint</h5> + <h5><i class="bi bi-arrow-repeat" data-bs-toggle="tooltip" data-bs-title="Explains the Sprint as the core, time-boxed event in Scrum where work is done."></i> The Sprint</h5> <div class="card-content-wrapper"> <p class="summary"> - The <span class="term">heartbeat of Scrum</span>. A fixed-length event of one month or less where + The <span class="term" data-bs-toggle="tooltip" data-bs-title="The Sprint provides a regular cadence for work, inspection, and adaptation, driving the rhythm of the Scrum process.">heartbeat of Scrum</span>. A fixed-length event of one month or less where ideas are turned into value. All other events happen within Sprints. </p> <button @@ -736,6 +745,7 @@ data-bs-target="#collapseSprint" aria-expanded="false" aria-controls="collapseSprint" + data-bs-toggle="tooltip" data-bs-title="Toggle details for The Sprint" > Details <i class="bi bi-chevron-down"></i> </button> @@ -761,11 +771,11 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-events" id="card-sprint-planning"> <div class="card-body"> - <h5><i class="bi bi-calendar2-plus-fill"></i> Sprint Planning</h5> + <h5><i class="bi bi-calendar2-plus-fill" data-bs-toggle="tooltip" data-bs-title="Describes the event where the Scrum Team plans the work for the upcoming Sprint."></i> Sprint Planning</h5> <div class="card-content-wrapper"> <p class="summary"> Initiates the Sprint by laying out the work to be performed. Addresses - <span class="term">Why</span>, <span class="term">What</span>, and <span class="term">How</span>. + <span class="term" data-bs-toggle="tooltip" data-bs-title="Clarifying the value and purpose of the Sprint, leading to the formulation of the Sprint Goal.">Why</span>, <span class="term" data-bs-toggle="tooltip" data-bs-title="Selecting Product Backlog Items that can be realistically completed within the Sprint to achieve the Sprint Goal.">What</span>, and <span class="term" data-bs-toggle="tooltip" data-bs-title="Developers planning the work needed to turn selected Product Backlog Items into a Done Increment.">How</span>. Output: Sprint Goal & Sprint Backlog. </p> <button @@ -775,6 +785,7 @@ data-bs-target="#collapseSprintPlanning" aria-expanded="false" aria-controls="collapseSprintPlanning" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Sprint Planning" > Details <i class="bi bi-chevron-down"></i> </button> @@ -805,10 +816,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-events" id="card-daily-scrum"> <div class="card-body"> - <h5><i class="bi bi-clock-history"></i> Daily Scrum</h5> + <h5><i class="bi bi-clock-history" data-bs-toggle="tooltip" data-bs-title="Explains the daily 15-minute event for Developers to synchronize and plan for the next 24 hours."></i> Daily Scrum</h5> <div class="card-content-wrapper"> <p class="summary"> - A <span class="term">15-minute event</span> for Developers to inspect progress toward the Sprint + A <span class="term" data-bs-toggle="tooltip" data-bs-title="A strict time-box for the Daily Scrum to maintain focus, encourage brevity, and ensure it's a quick synchronization point, not a detailed problem-solving session.">15-minute event</span> for Developers to inspect progress toward the Sprint Goal and adapt the Sprint Backlog. Improves communication and identifies impediments. </p> <button @@ -818,6 +829,7 @@ data-bs-target="#collapseDailyScrum" aria-expanded="false" aria-controls="collapseDailyScrum" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Daily Scrum" > Details <i class="bi bi-chevron-down"></i> </button> @@ -840,10 +852,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-events" id="card-sprint-review"> <div class="card-body"> - <h5><i class="bi bi-clipboard2-check-fill"></i> Sprint Review</h5> + <h5><i class="bi bi-clipboard2-check-fill" data-bs-toggle="tooltip" data-bs-title="Details the event where the Scrum Team and stakeholders inspect the Sprint's outcome and adapt the Product Backlog."></i> Sprint Review</h5> <div class="card-content-wrapper"> <p class="summary"> - Inspects the <span class="term">outcome of the Sprint</span> (the Increment) and determines future + Inspects the <span class="term" data-bs-toggle="tooltip" data-bs-title="The Increment(s) produced during the Sprint, which is demonstrated and discussed with stakeholders.">outcome of the Sprint</span> (the Increment) and determines future adaptations. Stakeholders provide feedback. Product Backlog may be adjusted. </p> <button @@ -853,6 +865,7 @@ data-bs-target="#collapseSprintReview" aria-expanded="false" aria-controls="collapseSprintReview" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Sprint Review" > Details <i class="bi bi-chevron-down"></i> </button> @@ -872,10 +885,10 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-events" id="card-sprint-retrospective"> <div class="card-body"> - <h5><i class="bi bi-arrow-clockwise"></i> Sprint Retrospective</h5> + <h5><i class="bi bi-arrow-clockwise" data-bs-toggle="tooltip" data-bs-title="Describes the event for the Scrum Team to reflect and plan improvements for future Sprints."></i> Sprint Retrospective</h5> <div class="card-content-wrapper"> <p class="summary"> - The Scrum Team inspects itself and creates a plan for <span class="term">improvements</span> to be + The Scrum Team inspects itself and creates a plan for <span class="term" data-bs-toggle="tooltip" data-bs-title="Specific, actionable changes the Scrum Team will implement in the next Sprint to enhance its effectiveness, quality, and processes.">improvements</span> to be enacted during the next Sprint. Focuses on quality and effectiveness. </p> <button @@ -885,6 +898,7 @@ data-bs-target="#collapseSprintRetrospective" aria-expanded="false" aria-controls="collapseSprintRetrospective" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Sprint Retrospective" > Details <i class="bi bi-chevron-down"></i> </button> @@ -914,11 +928,11 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-artifacts" id="card-product-backlog"> <div class="card-body"> - <h5><i class="bi bi-list-stars"></i> Product Backlog</h5> + <h5><i class="bi bi-list-stars" data-bs-toggle="tooltip" data-bs-title="Explains the Product Backlog as the ordered list of all known requirements for the product."></i> Product Backlog</h5> <div class="card-content-wrapper"> <p class="summary"> An emergent, ordered list of what is needed to improve the product. Single source of work. - <br /><strong>Commitment:</strong> <span class="term">Product Goal</span> (long-term objective). + <br /><strong>Commitment:</strong> <span class="term" data-bs-toggle="tooltip" data-bs-title="The long-term objective for the Scrum Team, providing context and direction for the Product Backlog and Sprints.">Product Goal</span> (long-term objective). </p> <button class="btn btn-sm details-toggle" @@ -927,6 +941,7 @@ data-bs-target="#collapseProductBacklog" aria-expanded="false" aria-controls="collapseProductBacklog" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Product Backlog" > Details <i class="bi bi-chevron-down"></i> </button> @@ -950,11 +965,11 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-artifacts" id="card-sprint-backlog"> <div class="card-body"> - <h5><i class="bi bi-list-task"></i> Sprint Backlog</h5> + <h5><i class="bi bi-list-task" data-bs-toggle="tooltip" data-bs-title="Details the Sprint Backlog as the plan by the Developers for the Sprint, including Sprint Goal and selected items."></i> Sprint Backlog</h5> <div class="card-content-wrapper"> <p class="summary"> Plan by and for Developers. Composed of the Sprint Goal, selected Product Backlog items, and an - actionable plan. <br /><strong>Commitment:</strong> <span class="term">Sprint Goal</span> (objective + actionable plan. <br /><strong>Commitment:</strong> <span class="term" data-bs-toggle="tooltip" data-bs-title="The single, concise objective for the Sprint, providing focus and guiding the Developers' work.">Sprint Goal</span> (objective for the Sprint). </p> <button @@ -964,6 +979,7 @@ data-bs-target="#collapseSprintBacklog" aria-expanded="false" aria-controls="collapseSprintBacklog" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Sprint Backlog" > Details <i class="bi bi-chevron-down"></i> </button> @@ -989,12 +1005,12 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-artifacts" id="card-increment"> <div class="card-body"> - <h5><i class="bi bi-box-arrow-up-right"></i> Increment</h5> + <h5><i class="bi bi-box-arrow-up-right" data-bs-toggle="tooltip" data-bs-title="Explains the Increment as the sum of all Product Backlog items completed during a Sprint and previous Sprints, meeting the Definition of Done."></i> Increment</h5> <div class="card-content-wrapper"> <p class="summary"> - A concrete <span class="term">stepping stone toward the Product Goal</span>. Each Increment is + A concrete <span class="term" data-bs-toggle="tooltip" data-bs-title="A concrete step toward the Product Goal; a version of the product that is potentially shippable and meets the Definition of Done.">stepping stone toward the Product Goal</span>. Each Increment is additive and must be usable. <br /><strong>Commitment:</strong> - <span class="term">Definition of Done</span> (formal description of quality). + <span class="term" data-bs-toggle="tooltip" data-bs-title="A formal, shared understanding of all the criteria a Product Backlog Item must meet to be considered complete and part of a usable Increment, ensuring quality.">Definition of Done</span> (formal description of quality). </p> <button class="btn btn-sm details-toggle" @@ -1003,6 +1019,7 @@ data-bs-target="#collapseIncrement" aria-expanded="false" aria-controls="collapseIncrement" + data-bs-toggle="tooltip" data-bs-title="Toggle details for Increment" > Details <i class="bi bi-chevron-down"></i> </button> @@ -1040,6 +1057,7 @@ target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary" + data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Access the definitive guide to Scrum, co-authored by Ken Schwaber and Jeff Sutherland." > <i class="bi bi-book-fill"></i> Official Scrum Guide </a> @@ -1049,6 +1067,7 @@ target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary" + data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Visit Scrum.org, the home of Scrum, for professional training, assessments, and resources." > <i class="bi bi-shield-check"></i> Scrum.org </a> @@ -1058,6 +1077,7 @@ target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary" + data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Explore Atlassian's resources and tools for implementing Scrum and agile practices." > <i class="bi bi-box-arrow-up-right"></i> Atlassian on Scrum </a> @@ -1067,6 +1087,7 @@ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { + // Collapse functionality const collapseElements = document.querySelectorAll(".collapse"); collapseElements.forEach((collapseEl) => { const button = document.querySelector(`.details-toggle[data-bs-target="#${collapseEl.id}"]`); @@ -1084,7 +1105,6 @@ } }; - // Set initial state based on whether the collapse element is already shown (e.g. by default) updateIconAndButton(collapseEl.classList.contains("show")); collapseEl.addEventListener("show.bs.collapse", () => { @@ -1096,6 +1116,16 @@ } }); + // Tooltip initialization + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + // Check if this element is also a collapse trigger + // If it is, we might want to avoid re-initializing tooltips on it when collapse state changes, + // or ensure Bootstrap handles this gracefully. For now, standard init. + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + + // Set current year in footer document.getElementById("currentYear").textContent = new Date().getFullYear(); }); </script>