Merge pull request #2040 from jvns/glossary-tooltip

Show the glossary definition when a user hovers over some Git jargon

Author: dscho

.github/workflows/update-git-version-and-manual-pages.yml

@@ -80,7 +80,7 @@ jobs:
         id: manual-pages
         if: steps.commit.outputs.result != '' || inputs.force-rebuild == true
         run: |
-          git add -A external/docs &&
+          git add -A external/docs static/js/glossary &&
           if test true = '${{ inputs.force-rebuild }}' && git diff-index --cached --quiet HEAD --
           then
             echo '::notice::A manual pages rebuild was requested but resulted in no changes' >&2

.github/workflows/update-translated-manual-pages.yml

@@ -65,7 +65,7 @@ jobs:
         run: |
           mkdir -p external/docs/sync &&
           git -C '${{ runner.temp }}/git-html-l10n' rev-parse HEAD >external/docs/sync/git-html-l10n.sha &&
-          git add external/docs/sync/git-html-l10n.sha &&
+          git add external/docs/sync/git-html-l10n.sha static/js/glossary &&
 
           git add -A external/docs &&
           if test true = '${{ inputs.force-rebuild }}' && git diff-index --cached --quiet HEAD --

assets/sass/reference.scss

@@ -57,6 +57,51 @@ h3.plumbing {
   @include background-image-2x($baseurl + "images/icons/plumbing-sm", 17px, 14px, 2px 50%);
 }
 
+.tooltip {
+  position: absolute;
+  /* invisible padding to make it easier to enter with the mouse */
+  padding: 15px;
+  visibility: hidden;
+
+  .tooltip-content {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+}
+
+.tooltip.show {
+  visibility: visible;
+}
+
+.expand-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  text-decoration: none;
+  
+  img {
+    width: 16px;
+    height: 16px;
+    opacity: 0.6;
+  }
+  
+  &:hover img {
+    opacity: 1;
+  }
+}
+
+.hover-term {
+  cursor: help;
+  text-decoration: underline dotted;
+  -webkit-text-decoration: underline dotted;
+}
+
 // § section sign anchor links
 #content {
   h1>a.anchor,

external/docs/content/docs/CodingGuidelines.html

@@ -1341,7 +1341,7 @@
 <pre>Placeholders are spelled in lowercase and enclosed in
 angle brackets surrounded by underscores:
   _&lt;file&gt;_
-  _&lt;commit&gt;_</pre>
+  _<span class="hover-term" data-term="commit">&lt;commit&gt;</span>_</pre>
 </div>
 </div>
 <div class="literalblock">
@@ -1371,7 +1371,7 @@
 the content.
   `--jobs &lt;n&gt;`
   `--sort=&lt;key&gt;`
-  `&lt;directory&gt;/.git`
+  `<span class="hover-term" data-term="directory">&lt;directory&gt;</span>/.git`
   `remote.&lt;name&gt;.mirror`
   `ssh://[&lt;user&gt;@]&lt;host&gt;[:&lt;port&gt;]/&lt;path-to-git-repo&gt;`</pre>
 </div>
@@ -1428,7 +1428,7 @@
 <div class="literalblock">
 <div class="content">
 <pre>An optional parameter needs to be typeset with unconstrained pairs
-  [&lt;repository&gt;]</pre>
+  [<span class="hover-term" data-term="repository">&lt;repository&gt;</span>]</pre>
 </div>
 </div>
 <div class="literalblock">
@@ -1478,14 +1478,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a|-d|&lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a|-d|<span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.0.5.html

@@ -515,14 +515,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.1.4.html

@@ -742,14 +742,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.11.4.html

@@ -840,14 +840,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.13.7.html

@@ -842,14 +842,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.17.0.html

@@ -859,14 +859,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>

external/docs/content/docs/CodingGuidelines/2.19.2.html

@@ -852,14 +852,14 @@
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>[(-p &lt;parent&gt;)...]
-(Any number of option -p, each with one &lt;parent&gt; argument.)</pre>
+<pre>[(-p <span class="hover-term" data-term="parent">&lt;parent&gt;</span>)...]
+(Any number of option -p, each with one <span class="hover-term" data-term="parent">&lt;parent&gt;</span> argument.)</pre>
 </div>
 </div>
 <div class="literalblock">
 <div class="content">
-<pre>git remote set-head &lt;name&gt; (-a | -d | &lt;branch&gt;)
-(One and only one of "-a", "-d" or "&lt;branch&gt;" _must_ (no square
+<pre>git remote set-head &lt;name&gt; (-a | -d | <span class="hover-term" data-term="branch">&lt;branch&gt;</span>)
+(One and only one of "-a", "-d" or "<span class="hover-term" data-term="branch">&lt;branch&gt;</span>" _must_ (no square
 brackets) be provided.)</pre>
 </div>
 </div>