[Tooltips] Add tooltips on hover (#6756)

* Add tooltip api, extend object api to add telemetry composition lookups, and add tooltips to gauges/notebook embeds/plot legends/object frames/object names/time strips/recent objects/search results/object tree

* Add tooltips to telemetry/lad tables

* Styling normalization, sanding and polishing.

* Add tooltips for Conditional widgets and Tab Views

* Add tests

* Switch to using enum-ish consts for tooltip locations

* Trim LAD table row name to account for spacing required by linting rules

---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
This commit is contained in:
Khalid Adil
2023-07-13 23:37:59 -05:00
committed by GitHub
parent 795d7a7ec7
commit cde8fbbb0d
30 changed files with 942 additions and 26 deletions

View File

@ -23,7 +23,6 @@
<layout-frame
:item="item"
:grid-size="gridSize"
:title="domainObject && domainObject.name"
:is-editing="isEditing"
@move="(gridDelta) => $emit('move', gridDelta)"
@endMove="() => $emit('endMove')"

View File

@ -30,12 +30,15 @@
>
<div
v-if="domainObject"
ref="telemetryViewWrapper"
class="c-telemetry-view u-style-receiver"
:class="[itemClasses]"
:style="styleObject"
:data-font-size="item.fontSize"
:data-font="item.font"
@contextmenu.prevent="showContextMenu"
@mouseover.ctrl="showToolTip"
@mouseleave="hideToolTip"
>
<div class="is-status__indicator" :title="`This item is ${status}`"></div>
<div v-if="showLabel" class="c-telemetry-view__label">
@ -69,6 +72,7 @@ import {
getDefaultNotebook,
getNotebookSectionAndPage
} from '@/plugins/notebook/utils/notebook-storage.js';
import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
const DEFAULT_POSITION = [1, 1];
@ -97,7 +101,7 @@ export default {
components: {
LayoutFrame
},
mixins: [conditionalStylesMixin, stalenessMixin],
mixins: [conditionalStylesMixin, stalenessMixin, tooltipHelpers],
inject: ['openmct', 'objectPath', 'currentView'],
props: {
item: {
@ -379,6 +383,10 @@ export default {
},
setStatus(status) {
this.status = status;
},
async showToolTip() {
const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
this.buildToolTip(await this.getObjectPath(), BELOW, 'telemetryViewWrapper');
}
}
};