@inkline/inkline/src/components/IPopover/template.html

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

<div
    class="popover-wrapper"
    ref="wrapper"
    :class="classes"
    :id="name"
    v-click-outside="onClickOutside"
    @keyup.esc="onEscape"
>
    <div
        class="popover-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="popover"
            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" />
            <div class="popover-header" v-if="$slots.header">
                <slot name="header" />
            </div>
            <div class="popover-body" v-if="$slots.body">
                <slot name="body" />
            </div>
            <div class="popover-footer" v-if="$slots.footer">
                <slot name="footer" />
            </div>
        </div>
    </transition>
</div>