@inkline/inkline/components/ITooltip/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<div
    class="tooltip-wrapper"
    ref="wrapper"
    :class="classes"
    :id="name"
    v-click-outside="onClickOutside"
    @keyup.esc="onEscape"
>
    <div
        class="tooltip-trigger"
        ref="trigger"
        :aria-describedby="`${name}-popup`"
        :aria-disabled="disabled ? 'true' : 'false'"
        :aria-expanded="visible ? 'true' : 'false'"
    >
        <slot />
    </div>

    <transition
        name="zoom-in-top-transition"
        @after-leave="destroyPopper"
    >
        <div
            class="tooltip"
            ref="popup"
            role="tooltip"
            aria-live="polite"
            :id="`${name}-popup`"
            :aria-hidden="visible ? 'false' : 'true'"
            v-show="visible"
        >
            <span data-popper-arrow v-if="arrow" />
            <slot name="body" />
        </div>
    </transition>
</div>