fix: issue with tooltip inside tag (#3272)

db-ui · Nov 5, 2024 · eae31d0 · eae31d0
1 parent 905c14b
commit eae31d0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
@@ -74,7 +74,7 @@
 		display: none;
 	}
 
-	> [class^="db-"] {
+	> :is([class="db-checkbox"], [class="db-radio"], [class="db-link"], [class="db-button"]) {
 		block-size: 100%;
 	}
 }

diff --git a/showcases/patternhub/scripts/utils.js b/showcases/patternhub/scripts/utils.js
@@ -197,6 +197,18 @@ export const getCodeByFramework = (
 		return `<${tag}${className} ${attributes.join(' ')}${reactSlots}/>`;
 	}
 
+	// Workaround for tooltip
+	if (componentName === 'tooltip') {
+		return innerContent.replace(
+			'</',
+			`<${tag}${className} ${attributes
+				.filter((attr) => attr !== 'content')
+				.join(' ')}>${
+				attributes.find((attr) => attr === 'content') ?? ''
+			}</${tag}></`
+		);
+	}
+
 	return `<${tag}${className} ${attributes.join(' ')}${reactSlots}>
 ${otherSlots}${innerContent}
 </${tag}>`;