slide-open-tooltip

A Tooltip.

Example

<slide-open-tooltip
    tooltipText="I am a tooltip text bubble!"
    tooltipImage="/images/question-mark.png"
/>

props

tooltipText (Optional) (String) Text

customTooltipSize (Optional) (Boolean) (Default: false) Sets size of tooltip

isToolTipPosition (Optional) (Boolean) (Default: false) Sets position of the tooltip.

tooltipImage (Optional) (String) image path.

Source Code

<template>
    <div class="tooltip-wrapper">
        <!--new test -->
        <button
            @click="makeOpen()"
            class="animated-close-button reposition"
            :class="{ tooltipsize: customTooltipSize }"
            :style="
                isGreen
                    ? { background: focusColor }
                    : { background: buttonColor }
            "
        >
            <img
                class="close-icon"
                :class="{ rotate: isActive }"
                :src="tooltipImage"
                alt="close icon"
            />
        </button>
        <transition name="slide-fade">
            <div
                class="tooltip-text-container"
                v-if="showTip"
                :class="{ 'tooltip-position': isToolTipPosition }"
            >
                <p class="tooltip-bubble">{{ tooltipText }}</p>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        name: 'ToolTip',
        props: {
            tooltipText: String,
            customTooltipSize: Boolean,
            isToolTipPosition: Boolean,
            tooltipImage: String,
            focusColor: String,
            buttonColor: String
        },
        data() {
            return {
                isActive: false,
                showTip: false,
                customTooltipSize: false,
                show: false
            };
        },
        methods: {
            makeOpen: function() {
                this.isActive = !this.isActive;
                this.isGreen = !this.isGreen;
                this.showTip = !this.showTip;
                this.show = !this.show;
            }
        }
    };
</script>
<style scoped>
    /*custom rezising and bubble positioning for FamilyTipsvue*/
    @media (max-width: 767px) {
        .tooltipsize {
            width: 33px;
            height: 33px;
            padding: 7px;
        }

        .tooltip-position {
            position: relative;
            left: -20px;
            top: -10px;
        }

        .tooltip-bubble {
            padding: 7px;
        }
    }

    .tooltip-wrapper {
        position: absolute;
        display: flex;
        flex-direction: row;
    }

    .tooltip-text-container {
        width: 100%;
    }

    button.animated-close-button.reposition {
        margin: 0;
        position: absolute;
        top: -31px;
        left: -40px;
    }

    .tooltip-bubble {
        background: white;
        border-radius: 4px;
        padding: 14px;
        max-width: 268px;
        width: 40vw;
        position: relative;
        -webkit-box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
        font-size: 18px;
    }

    .tooltip-text-container.tooltip-position {
        position: absolute;
        width: 100%;
        max-width: 500px;
    }

    .slide-fade-enter-active {
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    .slide-fade-leave-active {
        -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0.335, 0.845);
        -moz-transition: all 0.2s cubic-bezier(0.25, 0.25, 0.335, 0.845);
        -o-transition: all 0.2s cubic-bezier(0.25, 0.25, 0.335, 0.845);
        transition: all 0.2s cubic-bezier(0.25, 0.25, 0.335, 0.845);

        -webkit-transition-timing-function: cubic-bezier(
            0.25,
            0.25,
            0.335,
            0.845
        );
        -moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.335, 0.845);
        -o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.335, 0.845);
        transition-timing-function: cubic-bezier(0.25, 0.25, 0.335, 0.845);
        /* custom */
    }

    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translate(-20px, -30px);
        opacity: 0;
    }
</style>