Add tooltips for score and sidebar toggles

WolfgangDrescher · Jun 19, 2023 · e33992c · e33992c
1 parent a6d3925
commit e33992c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/locales/de.yaml b/src/locales/de.yaml
@@ -27,7 +27,9 @@ ambitus: Ambitus
 ulenberg: Ulenberg
 comments: Bemerkungen
 showScore: Noten einblenden
+hideScore: Noten ausblenden
 showSidebar: Seitenleiste einblenden
+hideSidebar: Seitenleiste ausblenden
 overview: Übersicht
 clefs: Schlüssel
 modes: Modi

diff --git a/src/pages/tricinium/[id].vue b/src/pages/tricinium/[id].vue
@@ -265,12 +265,22 @@ async function downloadPDF() {
             </div>
             <div>
                 <div class="grid grid-cols-2 gap-1">
-                    <Button @click="toggleScore" outline :selected="showScore" :hover="false" :title="$t('showScore')">
-                        <Icon name="heroicons-solid:musical-note" />
-                    </Button>
-                    <Button @click="toggleSidebar" outline :selected="showSidebar" :hover="false" :title="$t('showSidebar')">
-                        <Icon name="heroicons-solid:information-circle" />
-                    </Button>
+                    <VTooltip :hide-triggers="events => [...events]">
+                        <Button @click="toggleScore" outline :selected="showScore" :hover="false" :title="$t('showScore')">
+                            <Icon name="heroicons-solid:musical-note" />
+                        </Button>
+                        <template #popper>
+                            {{ showScore ? $t('hideScore') : $t('showScore') }}
+                        </template>
+                    </VTooltip>
+                    <VTooltip :hide-triggers="events => [...events]">
+                        <Button @click="toggleSidebar" outline :selected="showSidebar" :hover="false" :title="$t('showSidebar')">
+                            <Icon name="heroicons-solid:information-circle" />
+                        </Button>
+                        <template #popper>
+                            {{ showSidebar ? $t('hideSidebar') : $t('showSidebar') }}
+                        </template>
+                    </VTooltip>
                 </div>
             </div>
         </div>