diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index d83830d17a..83506237fb 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -5,6 +5,8 @@
import tippy from 'tippy.js';
+ export let elementId = '';
+
export let placement = 'top';
export let content = `I'm a tooltip!`;
export let touch = true;
@@ -17,20 +19,30 @@
let tooltipElement;
let tooltipInstance;
- $: if (tooltipElement && content) {
- if (tooltipInstance) {
- tooltipInstance.setContent(DOMPurify.sanitize(content));
+ $: if (tooltipElement && (content || elementId)) {
+ let tooltipContent = null;
+
+ if (elementId) {
+ tooltipContent = document.getElementById(`${elementId}`);
} else {
- tooltipInstance = tippy(tooltipElement, {
- content: DOMPurify.sanitize(content),
- placement: placement,
- allowHTML: allowHTML,
- touch: touch,
- ...(theme !== '' ? { theme } : { theme: 'dark' }),
- arrow: false,
- offset: offset,
- ...tippyOptions
- });
+ tooltipContent = DOMPurify.sanitize(content);
+ }
+
+ if (tooltipInstance) {
+ tooltipInstance.setContent(tooltipContent);
+ } else {
+ if (content) {
+ tooltipInstance = tippy(tooltipElement, {
+ content: tooltipContent,
+ placement: placement,
+ allowHTML: allowHTML,
+ touch: touch,
+ ...(theme !== '' ? { theme } : { theme: 'dark' }),
+ arrow: false,
+ offset: offset,
+ ...tippyOptions
+ });
+ }
}
} else if (tooltipInstance && content === '') {
if (tooltipInstance) {
@@ -48,3 +60,5 @@
+
+
diff --git a/src/lib/components/icons/Label.svelte b/src/lib/components/icons/Label.svelte
new file mode 100644
index 0000000000..dde0461336
--- /dev/null
+++ b/src/lib/components/icons/Label.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/lib/components/icons/Tag.svelte b/src/lib/components/icons/Tag.svelte
new file mode 100644
index 0000000000..2eca7f85b2
--- /dev/null
+++ b/src/lib/components/icons/Tag.svelte
@@ -0,0 +1,19 @@
+
+
+