feat: tooltip aria label

This commit is contained in:
Timothy J. Baek 2024-03-04 13:58:39 -08:00
parent 2d59847fb9
commit 475105473c
2 changed files with 15 additions and 12 deletions

View file

@ -29,6 +29,6 @@
}); });
</script> </script>
<div bind:this={tooltipElement}> <div bind:this={tooltipElement} aria-label={content}>
<slot /> <slot />
</div> </div>

View file

@ -34,10 +34,11 @@
import Sidebar from '$lib/components/layout/Sidebar.svelte'; import Sidebar from '$lib/components/layout/Sidebar.svelte';
import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte'; import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
import ChangelogModal from '$lib/components/ChangelogModal.svelte'; import ChangelogModal from '$lib/components/ChangelogModal.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
let ollamaVersion = ''; let ollamaVersion = '';
let loaded = false; let loaded = false;
let showShortcutsButtonElement:HTMLButtonElement let showShortcutsButtonElement: HTMLButtonElement;
let DB = null; let DB = null;
let localDBChats = []; let localDBChats = [];
@ -201,16 +202,18 @@
{#if loaded} {#if loaded}
<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10"> <div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
<button <Tooltip content="help" placement="left">
id="show-shortcuts-button" <button
bind:this={showShortcutsButtonElement} id="show-shortcuts-button"
class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full" bind:this={showShortcutsButtonElement}
on:click={() => { class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
showShortcuts = !showShortcuts; on:click={() => {
}} showShortcuts = !showShortcuts;
> }}
? >
</button> ?
</button>
</Tooltip>
</div> </div>
<ShortcutsModal bind:show={showShortcuts} /> <ShortcutsModal bind:show={showShortcuts} />