add tooltip class and only offset swimlane

nasa · Dec 16, 2024 · 20426fe · 20426fe
1 parent 20247bb
commit 20426fe
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/api/tooltips/ToolTip.js b/src/api/tooltips/ToolTip.js
@@ -27,10 +27,11 @@ import TooltipComponent from './components/TooltipComponent.vue';
 
 class Tooltip extends EventEmitter {
   constructor(
-    { toolTipText, toolTipLocation, parentElement } = {
+    { toolTipText, toolTipLocation, parentElement, cssClasses } = {
       tooltipText: '',
       toolTipLocation: 'below',
-      parentElement: null
+      parentElement: null,
+      cssClasses: []
     }
   ) {
     super();
@@ -42,7 +43,8 @@ class Tooltip extends EventEmitter {
       provide: {
         toolTipText,
         toolTipLocation,
-        parentElement
+        parentElement,
+        cssClasses
       },
       template: '<tooltip-component toolTipText="toolTipText"></tooltip-component>'
     });

diff --git a/src/api/tooltips/ToolTipAPI.js b/src/api/tooltips/ToolTipAPI.js
@@ -83,7 +83,7 @@ class TooltipAPI {
    */
 
   /**
-   * Tooltips take an options object that consists of the string, tooltipLocation, and parentElement
+   * Tooltips take an options object that consists of the string, tooltipLocation, a parentElement, and an array of cssClasses
    * @param {TooltipOptions} options
    */
   tooltip(options) {

diff --git a/src/api/tooltips/components/TooltipComponent.vue b/src/api/tooltips/components/TooltipComponent.vue
@@ -23,6 +23,7 @@ at runtime from the About dialog for additional information.
   <div
     ref="tooltip-wrapper"
     class="c-menu c-tooltip-wrapper"
+    :class="cssClasses"
     :style="toolTipLocationStyle"
     role="tooltip"
     aria-labelledby="tooltip-text"
@@ -36,7 +37,7 @@ at runtime from the About dialog for additional information.
 
 <script>
 export default {
-  inject: ['toolTipText', 'toolTipLocation', 'parentElement'],
+  inject: ['toolTipText', 'toolTipLocation', 'parentElement', 'cssClasses'],
   computed: {
     toolTipCoordinates() {
       return this.parentElement.getBoundingClientRect();

diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue
@@ -481,7 +481,8 @@ export default {
       this.tooltip = this.openmct.tooltips.tooltip({
         toolTipText: textToShow,
         toolTipLocation: this.openmct.tooltips.TOOLTIP_LOCATIONS.RIGHT,
-        parentElement: referenceElement
+        parentElement: referenceElement,
+        cssClasses: ['c-timeline-event-tooltip']
       });
     },
     checkIfOurEvent(keyString) {