Add tooltips to structured colors. Closes #12

README.md

@@ -72,7 +72,7 @@ palette:
 
 ##### • Structured color themes
 
-The field will use the first color of the object as the background-color. 
+The field will use the first color of the object as the background-color.
 
 ```yaml
 palette:
@@ -89,6 +89,20 @@ palette:
     ...
 ```
 
+You can add tooltips to structured colors: any color with the `tooltip` key will show a tooltip on hover.
+
+```yaml
+...
+  options:
+    blue:
+      background: '#135fdc'
+      tooltip: This is a tooltip
+    ...
+```
+
+![screenshot-tooltip](https://user-images.githubusercontent.com/14079751/70157500-fbf12d00-16b5-11ea-8572-4877dbcb32e5.jpg)
+
+
 ##### • Dynamic options
 
 You can set dynamic options / query your options from a different field. Just make sure the `value` returns a CSS-valid color.

lib/fields.php

@@ -76,4 +76,4 @@
        		}
 		),
     ),
-);
+);

package.json

@@ -17,5 +17,9 @@
     "cssnano": "^4.1.10",
     "sass": "^1.21.0",
     "vue-template-compiler": "^2.6.10"
+  },
+  "dependencies": {
+    "vue": "^2.6.10",
+    "vue-hot-reload-api": "^2.3.4"
   }
 }

src/assets/css/styles.scss

@@ -61,6 +61,49 @@
 	&-color {
 		width: 100%;
 		height: 100%;
+        &[data-tooltip] {
+            position: relative;
+            z-index: 2;
+            cursor: pointer;
+            &:before, &:after {
+                visibility: hidden;
+                pointer-events: none;
+            }
+            &:before {
+                position: absolute;
+                bottom: 120%;
+                left: 50%;
+                transform: translate(-50%);
+                margin-bottom: 5px;
+                padding: 7px 12px;
+                width: auto;
+                background-color: #000;
+                color: #fff;
+                content: attr(data-tooltip);
+                text-align: center;
+                font-size: 14px;
+                line-height: 16px;
+                white-space: pre;
+            }
+            &:after {
+                position: absolute;
+                bottom: 120%;
+                left: 50%;
+                margin-left: -5px;
+                width: 0;
+                border-top: 5px solid #000;
+                border-right: 5px solid transparent;
+                border-left: 5px solid transparent;
+                content: "";
+                font-size: 0;
+                line-height: 0;
+            }
+            &:hover {
+                &:before, &:after {
+                    visibility: visible;
+                }
+            }
+        }
 	}
 }
 
@@ -149,4 +192,4 @@
 			@keyframes spin10 { to { transform: translateY(-15.0em); } }
 		}
 	}
-}
+}