Merge pull request #1039 from googlefonts/issue-798

Improve tooltip positioning
googlefonts · Jan 18, 2024 · b3156d3 · b3156d3
2 parents b6ab72d + 0b41cb2
commit b3156d3
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 6 deletions.
diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css
@@ -15,6 +15,8 @@
 
   --tooltip-delay: 650ms;
   --tooltip-duration: 6s;
+  --tooltip-arrow-size: 7px;
+  --tooltip-max-width: 200px;
 }
 
 [data-tooltip] {
@@ -24,17 +26,17 @@
 
 [data-tooltip]:hover::before {
   content: attr(data-tooltip);
+  width: max-content;
+  max-width: var(--tooltip-max-width);
+  white-space: normal;
   font-size: 1em;
   text-align: center;
   position: absolute;
   display: block;
-  left: 200%;
-  bottom: calc(100% + 6px);
-  transform: translate(-50%);
-  background: var(--tooltip-background-color);
   border-radius: 4px;
   padding: 8px;
   color: var(--tooltip-foreground-color);
+  background: var(--tooltip-background-color);
   z-index: 1;
   opacity: 0;
   animation-name: disappear;
@@ -50,17 +52,115 @@
   width: 0;
   height: 0;
   bottom: 100%;
-  margin-left: -6px;
+  margin-left: calc(var(--tooltip-arrow-size) * -1);
   border: 1px solid black;
   border-color: var(--tooltip-background-color) transparent transparent transparent;
-  border-width: 7px 7px 0;
+  border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
   z-index: 1;
   opacity: 0;
   animation-name: disappear;
   animation-delay: var(--tooltip-delay);
   animation-duration: var(--tooltip-duration);
 }
 
+[data-tooltipposition="top-left"]:hover::before {
+  transform: translateY(calc(-100% - var(--tooltip-arrow-size)))
+    translateX(calc(var(--tooltip-arrow-size) * -1));
+}
+
+[data-tooltipposition="top"]:hover::before {
+  right: 50%;
+  transform: translateX(50%) translateY(calc(-100% - var(--tooltip-arrow-size)));
+}
+
+[data-tooltipposition="top-right"]:hover::before {
+  right: calc(var(--tooltip-arrow-size) * -1);
+  transform: translateY(calc(-100% - var(--tooltip-arrow-size)));
+}
+
+[data-tooltipposition="right"]:hover::before {
+  top: 50%;
+  left: calc(100% + var(--tooltip-arrow-size));
+  transform: translateY(-50%);
+}
+
+[data-tooltipposition="right"]:hover::after {
+  top: 50%;
+  left: 100%;
+  border-style: solid;
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
+  border-left: 0;
+  transform: translateY(-50%);
+  margin-left: 0;
+}
+
+[data-tooltipposition="bottom-right"]:hover::before {
+  right: calc(var(--tooltip-arrow-size) * -1);
+  top: calc(100% + var(--tooltip-arrow-size));
+}
+
+[data-tooltipposition="bottom-right"]:hover::after {
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
+  border-top: 0;
+  left: 100%;
+  top: 100%;
+  margin-left: calc(var(--tooltip-arrow-size) * -2);
+}
+
+[data-tooltipposition="bottom"]:hover::before {
+  transform: translateX(50%);
+  right: 50%;
+  top: calc(100% + var(--tooltip-arrow-size));
+}
+
+[data-tooltipposition="bottom"]:hover::after {
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
+  border-top: 0;
+  left: 100%;
+  top: 100%;
+  margin-left: calc(var(--tooltip-arrow-size) * -2);
+}
+
+[data-tooltipposition="bottom-left"]:hover::before {
+  left: calc(var(--tooltip-arrow-size) * -1);
+  top: calc(100% + var(--tooltip-arrow-size));
+}
+
+[data-tooltipposition="bottom-left"]:hover::after {
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
+  border-top: 0;
+  left: 100%;
+  top: 100%;
+  margin-left: calc(var(--tooltip-arrow-size) * -2);
+}
+
+[data-tooltipposition="left"]:hover::before {
+  right: calc(100% + var(--tooltip-arrow-size));
+  transform: translateY(-50%);
+  top: 50%;
+}
+
+[data-tooltipposition="left"]:hover::after {
+  border-style: solid;
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
+  border-right: 0;
+  right: 100%;
+  left: initial;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0;
+}
+
 @keyframes disappear {
   0% {
     opacity: 1;

diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js
@@ -131,12 +131,14 @@ export default class DesignspaceNavigationPanel extends Panel {
             "disabled": false,
             "hidden": true,
             "data-tooltip": "Reset all axes",
+            "data-tooltipposition": "top-left",
           }),
           html.createDomElement("icon-button", {
             "id": "edit-local-axes-button",
             "src": "/tabler-icons/tool.svg",
             "onclick": (event) => this.editLocalAxes(event),
             "data-tooltip": "Edit local axes",
+            "data-tooltipposition": "top-left",
           }),
         ]),
         html.hr(),