| 1 |
<template> |
| 2 |
<h3>Tooltip Props Controls</h3> |
| 3 |
<div class="tooltip-controls"> |
| 4 |
<label> |
| 5 |
Theme: |
| 6 |
<select v-model="theme"> |
| 7 |
<option value="light">Light</option> |
| 8 |
<option value="inverted">Inverted</option> |
| 9 |
<option value="dusk">Dusk</option> |
| 10 |
</select> |
| 11 |
</label> |
| 12 |
|
| 13 |
<label> |
| 14 |
Placement: |
| 15 |
<select v-model="placement"> |
| 16 |
<option value="top">Top</option> |
| 17 |
<option value="bottom">Bottom</option> |
| 18 |
<option value="left">Left</option> |
| 19 |
<option value="right">Right</option> |
| 20 |
</select> |
| 21 |
</label> |
| 22 |
|
| 23 |
<label> |
| 24 |
Tooltip Content: |
| 25 |
<input v-model="content" type="text" /> |
| 26 |
</label> |
| 27 |
|
| 28 |
<label> |
| 29 |
Max Width: |
| 30 |
<input v-model="maxWidth" type="text" placeholder="e.g. 320px" /> |
| 31 |
</label> |
| 32 |
|
| 33 |
<label> |
| 34 |
Hide After (ms): |
| 35 |
<input v-model="hideAfter" type="number" /> |
| 36 |
</label> |
| 37 |
</div> |
| 38 |
|
| 39 |
<h3>Tooltip Component Preview</h3> |
| 40 |
<div class="tooltip-preview"> |
| 41 |
<IvyTooltip |
| 42 |
:content="content" |
| 43 |
:theme="theme" |
| 44 |
:placement="placement" |
| 45 |
:max-width="maxWidth" |
| 46 |
:hide-after="hideAfter" |
| 47 |
:model-value="modelValueTT" |
| 48 |
@update:model-value="modelValueTT = $event" |
| 49 |
> |
| 50 |
<IvyIcon name="question" type="outline" size="l" /> |
| 51 |
</IvyTooltip> |
| 52 |
</div> |
| 53 |
</template> |
| 54 |
|
| 55 |
<script setup lang="ts"> |
| 56 |
import { ref } from 'vue' |
| 57 |
|
| 58 |
const theme = ref<'light' | 'inverted' | 'dusk'>('light') |
| 59 |
const placement = ref< |
| 60 |
| 'top' |
| 61 |
| 'top-start' |
| 62 |
| 'top-end' |
| 63 |
| 'bottom' |
| 64 |
| 'bottom-start' |
| 65 |
| 'bottom-end' |
| 66 |
| 'left' |
| 67 |
| 'left-start' |
| 68 |
| 'left-end' |
| 69 |
| 'right' |
| 70 |
| 'right-start' |
| 71 |
| 'right-end' |
| 72 |
>('top') |
| 73 |
const content = ref('This is a tooltip') |
| 74 |
const maxWidth = ref('320px') |
| 75 |
const hideAfter = ref(0) |
| 76 |
const modelValueTT = ref(true) |
| 77 |
</script> |
| 78 |
|
| 79 |
<style lang="scss"> |
| 80 |
.tooltip-preview { |
| 81 |
display: flex; |
| 82 |
justify-content: center; |
| 83 |
margin-top: 60px; |
| 84 |
} |
| 85 |
</style> |
| 86 |
|
