Added Tooltip inline property

skeletonlabs · Oct 4, 2022 · 2cec632 · 2cec632
1 parent 1fd0a0f
commit 2cec632
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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>