<template>
    <v-tooltip top>
        <template #activator="{ on: onTooltip }">
            <v-hover v-slot="{ hover }">
                <v-btn
                    text
                    class="my-2 white--text text-caption text-no-transform"
                    :class="{
                        'bg-orange': hover,
                    }"
                    small
                    v-on="onTooltip"
                    @click="OnClick"
                >
                    {{ __(item.caption) }}
                </v-btn>
            </v-hover>
        </template>

        <span class="text-caption">
            {{ __(item.tooltip) }}
        </span>
    </v-tooltip>
</template>

<script>   
    export default {
        props: {
            item: {required: true},
        },

        methods: {
            OnClick() {
                this.item.Click();
            }
        },

        name: 'FooterBtn',
    }
</script>