@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
37 lines (35 loc) • 871 B
HTML
<div
class="tooltip-wrapper"
ref="wrapper"
:class="classes"
:id="name"
v-click-outside="onClickOutside"
.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>