feat: connecting element and its tooltip

db-ui · Oct 17, 2023 · 6502382 · 6502382
1 parent a34464d
commit 6502382
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 22 deletions.
diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html
@@ -10,7 +10,7 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<db-button>
+		<db-button [describedbyid]="exampleProps.id">
 			{{ exampleName }}
 			<db-tooltip
 				[width]="exampleProps.width"
@@ -19,6 +19,7 @@
 				[behaviour]="exampleProps.behaviour"
 				[delay]="exampleProps.delay"
 				[variant]="exampleProps.variant"
+				[id]="exampleProps.id"
 				>{{ exampleProps.content }}</db-tooltip
 			>
 		</db-button>

diff --git a/showcases/react-showcase/src/components/tooltip/index.tsx b/showcases/react-showcase/src/components/tooltip/index.tsx
@@ -12,17 +12,19 @@ const getTooltip = ({
 	delay,
 	content,
 	behaviour,
-	variant
+	variant,
+	id
 }: DBTooltipProps & { content: string }) => (
-	<DBButton>
+	<DBButton describedbyid={id}>
 		{children}
 		<DBTooltip
 			width={width}
 			emphasis={emphasis}
 			placement={placement}
 			behaviour={behaviour}
 			delay={delay}
-			variant={variant}>
+			variant={variant}
+			id={id}>
 			{content}
 		</DBTooltip>
 	</DBButton>

diff --git a/showcases/shared/tooltip.json b/showcases/shared/tooltip.json
@@ -6,21 +6,24 @@
 				"name": "functional",
 				"className": "db-ui-functional",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-01"
 				}
 			},
 			{
 				"name": "regular (Default)",
 				"className": "db-ui-regular",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-02"
 				}
 			},
 			{
 				"name": "expressive",
 				"className": "db-ui-expressive",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-03"
 				}
 			}
 		]
@@ -31,14 +34,16 @@
 			{
 				"name": "With arrow (Default)",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-04"
 				}
 			},
 			{
 				"name": "Basic",
 				"props": {
 					"content": "Tooltip",
-					"variant": "basic"
+					"variant": "basic",
+					"id": "tooltip-05"
 				}
 			}
 		]
@@ -49,14 +54,16 @@
 			{
 				"name": "Weak (Default)",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-06"
 				}
 			},
 			{
 				"name": "Strong",
 				"props": {
 					"content": "Tooltip",
-					"emphasis": "strong"
+					"emphasis": "strong",
+					"id": "tooltip-07"
 				}
 			}
 		]
@@ -68,28 +75,32 @@
 				"name": "bottom (Default)",
 				"props": {
 					"content": "Tooltip",
-					"placement": "bottom"
+					"placement": "bottom",
+					"id": "tooltip-08"
 				}
 			},
 			{
 				"name": "top",
 				"props": {
 					"content": "Tooltip",
-					"placement": "top"
+					"placement": "top",
+					"id": "tooltip-09"
 				}
 			},
 			{
 				"name": "left",
 				"props": {
 					"content": "Tooltip",
-					"placement": "left"
+					"placement": "left",
+					"id": "tooltip-10"
 				}
 			},
 			{
 				"name": "right",
 				"props": {
 					"content": "Tooltip",
-					"placement": "right"
+					"placement": "right",
+					"id": "tooltip-11"
 				}
 			}
 		]
@@ -100,14 +111,16 @@
 			{
 				"name": "Auto (Default)",
 				"props": {
-					"content": "Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
+					"content": "Max width, lorem ipsum dolor sit amet, consetetur sadipscing",
+					"id": "tooltip-12"
 				}
 			},
 			{
 				"name": "Fixed",
 				"props": {
 					"content": "Max width, lorem ipsum dolor sit amet, consetetur sadipscing",
-					"width": "fixed"
+					"width": "fixed",
+					"id": "tooltip-13"
 				}
 			}
 		]
@@ -118,28 +131,32 @@
 			{
 				"name": "Animation no delay (Default)",
 				"props": {
-					"content": "Tooltip"
+					"content": "Tooltip",
+					"id": "tooltip-14"
 				}
 			},
 			{
 				"name": "Delay slow",
 				"props": {
 					"content": "Tooltip",
-					"delay": "slow"
+					"delay": "slow",
+					"id": "tooltip-15"
 				}
 			},
 			{
 				"name": "Delay fast",
 				"props": {
 					"content": "Tooltip",
-					"delay": "fast"
+					"delay": "fast",
+					"id": "tooltip-16"
 				}
 			},
 			{
 				"name": "No animation",
 				"props": {
 					"content": "Tooltip",
-					"behaviour": "plain"
+					"behaviour": "plain",
+					"id": "tooltip-17"
 				}
 			}
 		]

diff --git a/showcases/vue-showcase/src/components/tooltip/Tooltip.vue b/showcases/vue-showcase/src/components/tooltip/Tooltip.vue
@@ -9,7 +9,7 @@ import { DBButton, DBTooltip } from "../../../../../output/vue/vue3/src";
 		<template
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
-			<DBButton>
+			<DBButton :describedbyid="exampleProps.id">
 				{{ exampleName }}
 				<DBTooltip
 					:width="exampleProps.width"
@@ -18,6 +18,7 @@ import { DBButton, DBTooltip } from "../../../../../output/vue/vue3/src";
 					:behaviour="exampleProps.behaviour"
 					:delay="exampleProps.delay"
 					:variant="exampleProps.variant"
+					:id="exampleProps.id"
 				>
 					{{ exampleProps.content }}
 				</DBTooltip>