<template>

    <span :class="'toolTip tooltip' + position.charAt(0).toUpperCase() + position.slice(1)">

        <i class="fal fa-info-circle"></i>

        <div class="tip">

            <h4 v-text="title" v-if="title.length"></h4>
            <p v-text="content" v-if="content.length"></p>

        </div>

    </span>

</template>

<script>


    export default {

        name: 'tooltip',

        props: {
            title: {
                type: String,
                default: ''
            },
            content: {
                type: String,
                default: ''
            },
            position: {
                type: String,
                default: 'bottom'
            },

        },


        methods: {},

        mounted() {}

    }

</script>
