Tooltip

1<script setup lang="ts">2import { Button, Tooltip as vTooltip } from '@vitral/vue';3</script>4 5<template>6    <Button v-tooltip.bottom="'Save the document'" icon="download" aria-label="Save" severity="secondary" />7    <Button v-tooltip="'Top is the default'" label="Top" severity="secondary" />8    <Button v-tooltip.right="'On the right'" label="Right" severity="secondary" />9    <Button v-tooltip.bottom="'Below'" label="Bottom" severity="secondary" />10    <Button v-tooltip.left="'On the left'" label="Left" severity="secondary" />11</template>

1<script setup lang="ts">2import { Button, Tooltip as vTooltip } from '@vitral/vue';3import { ref } from 'vue';4 5const enabled = ref(true);6</script>7 8<template>9    <Button v-tooltip="{ value: 'Shown after half a second', showDelay: 500 }" label="Show delay" severity="secondary" />10    <Button v-tooltip="{ value: 'Lingers for a second after you leave', hideDelay: 1000 }" label="Hide delay" severity="secondary" />11    <Button12        v-tooltip="{ value: 'Tooltips wrap at twenty rem so a long explanation stays readable instead of running across the whole window.', placement: 'bottom' }"13        label="Long text"14        severity="secondary"15    />16    <Button v-tooltip="{ value: 'Now you see me', disabled: !enabled }" :label="enabled ? 'Enabled' : 'Disabled'" severity="secondary" @click="enabled = !enabled" />17</template>

1<script setup lang="ts">2import { InputText, Tooltip as vTooltip } from '@vitral/vue';3</script>4 5<template>6    <InputText v-tooltip.right="'Letters, digits and dashes'" aria-label="Username" placeholder="Username" />7</template>