From 2cec632ca55a6526dd07e6dcd034c8bf7deeba23 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Tue, 4 Oct 2022 17:03:51 -0500
Subject: [PATCH] Added Tooltip inline property

---
 src/lib/utilities/Tooltip/tooltip.ts               | 4 +++-
 src/routes/(inner)/utilities/tooltips/+page.svelte | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/utilities/Tooltip/tooltip.ts b/src/lib/utilities/Tooltip/tooltip.ts
index 21e74b317..88e96b325 100644
--- a/src/lib/utilities/Tooltip/tooltip.ts
+++ b/src/lib/utilities/Tooltip/tooltip.ts
@@ -3,6 +3,7 @@
 export interface ArgsTooltip {
 	content: string;
 	position?: string;
+	inline?: boolean;
 	// Style Overrides
 	background?: string;
 	color?: string;
@@ -25,6 +26,7 @@ export function tooltip(node: HTMLElement, args: ArgsTooltip) {
 	const {
         content = '(tooltip)',
         position = 'top',
+		inline = true,
         // Regions
         regionContainer = 'regionContainer',
         regionTooltip = 'regionTooltip',
@@ -33,7 +35,7 @@ export function tooltip(node: HTMLElement, args: ArgsTooltip) {
 
 	// Create a wrapping element, set relative positioning
 	const createElemContainer = (): void => {
-		const elemContainer = document.createElement('div');
+		const elemContainer = document.createElement(inline ? 'span' : 'div');
 		elemContainer.classList.add('tooltip-container', 'relative', regionContainer);
 		node.parentNode?.insertBefore(elemContainer, node);
 		elemContainer.appendChild(node);
diff --git a/src/routes/(inner)/utilities/tooltips/+page.svelte b/src/routes/(inner)/utilities/tooltips/+page.svelte
index dc5f0c70d..c1b6c2e31 100644
--- a/src/routes/(inner)/utilities/tooltips/+page.svelte
+++ b/src/routes/(inner)/utilities/tooltips/+page.svelte
@@ -16,6 +16,7 @@
 			<p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio et voluptatibus nobis cupiditate eos saepe ab officiis quisquam consequatur magni porro veritatis fuga mollitia ipsa, blanditiis quidem minima molestias sint.</p>
 		`,
 		position: 'bottom',
+		inline: false,
 		width: '!w-[480px]'
 	};
 
@@ -24,6 +25,7 @@
 		source: [
 			['content', 'string', '(tooltip)', 'HTML', '&check;', 'The HTML content of your tooltip.'],
 			['position', 'string', 'top', 'top | bottom | left | right', '-', 'Designates where the tooltip will appear.'],
+			['inline', 'boolean', 'false', 'true | false', '-', 'Sets the wrapping element to inline or block.'],
 			['background', 'string', '-', 'class', '-', 'Provide a class to set the background color.'],
 			['color', 'string', '-', 'class', '-', 'Provide a class to set the text color.'],
 			['width', 'string', '-', 'class', '-', 'Provide a class to set the width.'],
@@ -83,7 +85,7 @@
 				language="html"
 				code={`
 <!-- Container -->
-<div class="tooltip-container relative regionContainer">
+<span class="tooltip-container relative regionContainer">
 	<!-- Tooltip -->
 	<div class="tooltip tooltip-top regionTooltip hidden" role="tooltip" data-testid="tooltip">
 		Skeleton
@@ -92,7 +94,7 @@
 	</div>
 	<!-- Trigger -->
 	<button>Trigger</button>
-</div>
+</span>
 		`}
 			/>
 		</div>