forked from open-webui/open-webui
feat: tooltip
Co-Authored-By: Jannik S. <69747628+jannikstdl@users.noreply.github.com>
This commit is contained in:
parent
edb63c2280
commit
63c0927022
2 changed files with 139 additions and 95 deletions
31
src/lib/components/common/Tooltip.svelte
Normal file
31
src/lib/components/common/Tooltip.svelte
Normal file
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import tippy from 'tippy.js';
|
||||
|
||||
export let placement = 'top';
|
||||
export let content = `I'm a tooltip!`;
|
||||
|
||||
let tooltipElement;
|
||||
let tooltipInstance;
|
||||
|
||||
$: if (tooltipElement && content) {
|
||||
if (tooltipInstance) {
|
||||
tooltipInstance[0]?.destroy();
|
||||
}
|
||||
tooltipInstance = tippy(tooltipElement, {
|
||||
content: content,
|
||||
placement: placement,
|
||||
allowHTML: true
|
||||
});
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (tooltipInstance) {
|
||||
tooltipInstance[0]?.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={tooltipElement}>
|
||||
<slot />
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue