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