3 files changed, 319 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/tooltips/README.md b/assets/sass/@primer/css/tooltips/README.md
new file mode 100644
index 0000000..67f22ab
--- /dev/null
+++ b/assets/sass/@primer/css/tooltips/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "tooltips"
+generated: true
+---
+
+# Primer CSS: `tooltips` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/tooltips/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/tooltips.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/tooltips/index.scss b/assets/sass/@primer/css/tooltips/index.scss
new file mode 100644
index 0000000..e595fe2
--- /dev/null
+++ b/assets/sass/@primer/css/tooltips/index.scss
@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./tooltips.scss";
diff --git a/assets/sass/@primer/css/tooltips/tooltips.scss b/assets/sass/@primer/css/tooltips/tooltips.scss
new file mode 100644
index 0000000..315f5e4
--- /dev/null
+++ b/assets/sass/@primer/css/tooltips/tooltips.scss
@@ -0,0 +1,292 @@
+.tooltipped {
+  position: relative;
+}
+
+// This is the tooltip bubble
+.tooltipped::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: $em-spacer-5 $em-spacer-6;
+  font: normal normal 11px/1.5 $body-font;
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: $text-white;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: $bg-black;
+  border-radius: $border-radius;
+  opacity: 0;
+}
+
+// This is the tooltip arrow
+.tooltipped::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: $text-black;
+  pointer-events: none;
+  content: "";
+  // stylelint-disable-next-line primer/borders
+  border: 6px $border-style transparent;
+  opacity: 0;
+}
+
+// delay animation for tooltip
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus {
+  &::before,
+  &::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: $tooltip-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    animation-delay: $tooltip-delay;
+  }
+}
+
+.tooltipped-no-delay:hover,
+.tooltipped-no-delay:active,
+.tooltipped-no-delay:focus {
+  &::before,
+  &::after {
+    animation-delay: 0s;
+  }
+}
+
+.tooltipped-multiline:hover,
+.tooltipped-multiline:active,
+.tooltipped-multiline:focus {
+  &::after {
+    display: table-cell;
+  }
+}
+
+// Tooltipped south
+.tooltipped-s,
+.tooltipped-se,
+.tooltipped-sw {
+  &::after {
+    top: 100%;
+    right: 50%;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: 6px;
+  }
+
+  &::before {
+    top: auto;
+    right: 50%;
+    bottom: -7px;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: -6px;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-color: $bg-black;
+  }
+}
+
+.tooltipped-se {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -$spacer-3;
+  }
+}
+
+.tooltipped-sw::after {
+  margin-right: -$spacer-3;
+}
+
+// Tooltips above the object
+.tooltipped-n,
+.tooltipped-ne,
+.tooltipped-nw {
+  &::after {
+    right: 50%;
+    bottom: 100%;
+    // stylelint-disable-next-line primer/spacing
+    margin-bottom: 6px;
+  }
+
+  &::before {
+    top: -7px;
+    right: 50%;
+    bottom: auto;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: -6px;
+    // stylelint-disable-next-line primer/borders
+    border-top-color: $bg-black;
+  }
+}
+
+.tooltipped-ne {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -$spacer-3;
+  }
+}
+
+.tooltipped-nw::after {
+  margin-right: -$spacer-3;
+}
+
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after,
+.tooltipped-n::after {
+  transform: translateX(50%);
+}
+
+// Tooltipped to the left
+.tooltipped-w {
+  &::after {
+    right: 100%;
+    bottom: 50%;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 6px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    bottom: 50%;
+    left: -7px;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -6px;
+    // stylelint-disable-next-line primer/borders
+    border-left-color: $bg-black;
+  }
+}
+
+// tooltipped to the right
+.tooltipped-e {
+  &::after {
+    bottom: 50%;
+    left: 100%;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 6px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    right: -7px;
+    bottom: 50%;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -6px;
+    // stylelint-disable-next-line primer/borders
+    border-right-color: $bg-black;
+  }
+}
+
+// Tooltip align right and left
+.tooltipped-align-right-1,
+.tooltipped-align-right-2 {
+  &::after {
+    right: 0;
+    margin-right: 0;
+  }
+}
+
+.tooltipped-align-right-1 {
+  &::before {
+    right: 10px;
+  }
+}
+
+.tooltipped-align-right-2 {
+  &::before {
+    right: 15px;
+  }
+}
+
+.tooltipped-align-left-1,
+.tooltipped-align-left-2, {
+  &::after {
+    left: 0;
+    margin-left: 0;
+  }
+}
+
+.tooltipped-align-left-1 {
+  &::before {
+    left: 5px;
+  }
+}
+
+.tooltipped-align-left-2 {
+  &::before {
+    left: 10px;
+  }
+}
+
+// Multiline tooltips
+//
+// `.tooltipped-multiline` Add this class when you have long content.
+// The downside is you cannot preformat the text with newlines and `[w,e]`
+// are always `$tooltip-max-width` wide.
+.tooltipped-multiline {
+  &::after {
+    width: max-content;
+    max-width: $tooltip-max-width;
+    word-wrap: break-word;
+    white-space: pre-line;
+    border-collapse: separate;
+  }
+
+  &.tooltipped-s::after,
+  &.tooltipped-n::after {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.tooltipped-w::after,
+  &.tooltipped-e::after {
+    right: 100%;
+  }
+}
+
+@media screen and (min-width: 0\0) {
+  // IE11
+  .tooltipped-multiline::after {
+    width: $tooltip-max-width;
+  }
+}
+
+// Sticky tooltips
+//
+// Always show the tooltip.
+.tooltipped-sticky {
+  &::before,
+  &::after {
+    display: inline-block;
+  }
+
+  &.tooltipped-multiline {
+    &::after {
+      display: table-cell;
+    }
+  }
+}