aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-tooltip/c-tooltip.demo.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-tooltip/c-tooltip.demo.vue')
-rw-r--r--src/ui/c-tooltip/c-tooltip.demo.vue18
1 files changed, 18 insertions, 0 deletions
diff --git a/src/ui/c-tooltip/c-tooltip.demo.vue b/src/ui/c-tooltip/c-tooltip.demo.vue
index d385257..edd1364 100644
--- a/src/ui/c-tooltip/c-tooltip.demo.vue
+++ b/src/ui/c-tooltip/c-tooltip.demo.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+const positions = ['top', 'bottom', 'left', 'right'] as const;
+</script>
+
<template>
<div>
<c-tooltip>
@@ -14,4 +18,18 @@
Hover me
</c-tooltip>
</div>
+
+ <div mt-5>
+ <h2>Tooltip positions</h2>
+
+ <div class="flex flex-wrap gap-4">
+ <div v-for="position in positions" :key="position">
+ <c-tooltip :position="position" :tooltip="`Tooltip ${position}`">
+ <c-button>
+ {{ position }}
+ </c-button>
+ </c-tooltip>
+ </div>
+ </div>
+ </div>
</template>