Title -> Tooltip

googlefonts · Sep 4, 2023 · 941898c · 941898c
1 parent 7072e8a
commit 941898c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css
@@ -1,10 +1,10 @@
-[data-title] {
+[data-tooltip] {
   position: relative;
   cursor: default;
 }
 
-[data-title]:hover::before {
-  content: attr(data-title);
+[data-tooltip]:hover::before {
+  content: attr(data-tooltip);
   font-size: 10px;
   text-align: center;
   position: absolute;
@@ -25,7 +25,7 @@
   animation-duration: 6s;
 }
 
-[data-title]:hover::after {
+[data-tooltip]:hover::after {
   content: "";
   position: absolute;
   display: block;
@@ -60,11 +60,11 @@
 }
 
 @media (prefers-reduced-motion) {
-  [data-title]:hover::before {
+  [data-tooltip]:hover::before {
     opacity: 1;
     animation: none;
   }
-  [data-title]:hover::after {
+  [data-tooltip]:hover::after {
     opacity: 1;
     animation: none;
   }

diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js
@@ -40,7 +40,7 @@ export class IconButton extends UnlitElement {
 
   static properties = {
     src: { type: String },
-    title: { type: String },
+    tooltip: { type: String },
   };
 
   get disabled() {
@@ -64,7 +64,7 @@ export class IconButton extends UnlitElement {
       {
         "onclick": this._buttonOnClick,
         "disabled": this._buttonDisabled,
-        "data-title": this.title,
+        "data-tooltip": this.tooltip,
       },
       [html.createDomElement("inline-svg", { src: this.src })]
     );

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