Fix an issue with tooltips not sticking to their host elements

Signed-off-by: Axel Boberg <[email protected]>
svt · Feb 14, 2024 · d1b1e5e · d1b1e5e
1 parent 42c40f6
commit d1b1e5e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/app/bridge.css b/app/bridge.css
@@ -271,15 +271,24 @@ input[type="checkbox"]:checked::before {
 
 /* Hints */
 
+[data-hint] {
+  position: relative;
+}
+
 [data-hint]:hover::before {
   content: attr(data-hint);
   position: absolute;
+  top: 0;
+  left: 0;
+
   padding: 5px 9px;
 
   color: black;
   background: white;
   border-radius: 6px;
 
+  white-space: nowrap;
+
   transform: translate(0, 5px);
   z-index: 10;
 }

diff --git a/plugins/caspar/lib/types.js b/plugins/caspar/lib/types.js
@@ -114,6 +114,7 @@ function init (htmlPath) {
         name: 'Duration',
         type: 'string',
         default: '0',
+        allowsVariables: true,
         'ui.group': 'Transition',
         'ui.unit': 'frames'
       },

diff --git a/plugins/inspector/app/components/Form/index.jsx b/plugins/inspector/app/components/Form/index.jsx
@@ -211,7 +211,7 @@ export function Form () {
           <label id={id} className='Form-inputLabel'>{property.name}</label>
           {
             property.allowsVariables &&
-            <div className='Form-inputVariableHint' data-hint='Supports variables' data-hint-alignment='right'>=</div>
+            <div className='Form-inputVariableHint' data-hint='Supports variables as $(name)' data-hint-alignment='right'>=</div>
           }
         </div>
         {

diff --git a/plugins/types/package.json b/plugins/types/package.json
@@ -55,6 +55,7 @@
           "delay": {
             "name": "Delay",
             "type": "string",
+            "allowsVariables": true,
             "ui.group": "Timing",
             "ui.unit": "ms"
           }
@@ -73,6 +74,7 @@
           "delay": {
             "name": "Delay",
             "type": "string",
+            "allowsVariables": true,
             "ui.group": "Timing",
             "ui.unit": "ms"
           }