Browse Source

refac: tooltip

Timothy J. Baek 10 months ago
parent
commit
781ad70598
2 changed files with 10 additions and 1 deletions
  1. 4 0
      src/app.css
  2. 6 1
      src/lib/components/common/Tooltip.svelte

+ 4 - 0
src/app.css

@@ -150,3 +150,7 @@ input[type='number'] {
 .cm-editor.cm-focused {
 	outline: none;
 }
+
+.tippy-box[data-theme~='dark'] {
+	@apply rounded-lg bg-gray-950 text-xs border border-gray-900 shadow-xl;
+}

+ 6 - 1
src/lib/components/common/Tooltip.svelte

@@ -3,11 +3,13 @@
 	import { marked } from 'marked';
 
 	import tippy from 'tippy.js';
+	import { roundArrow } from 'tippy.js';
 
 	export let placement = 'top';
 	export let content = `I'm a tooltip!`;
 	export let touch = true;
 	export let className = 'flex';
+	export let theme = '';
 
 	let tooltipElement;
 	let tooltipInstance;
@@ -20,7 +22,10 @@
 				content: content,
 				placement: placement,
 				allowHTML: true,
-				touch: touch
+				touch: touch,
+				...(theme !== '' ? { theme } : { theme: 'dark' }),
+				arrow: false,
+				offset: [0, 4]
 			});
 		}
 	} else if (tooltipInstance && content === '') {