Using Vue Teleport for Modals and Tooltips

Modals and tooltips have a layout problem. They need to appear above everything else on the page (z-index, positioning), but they are usually triggered from deep inside a component tree. Vue's Teleport solves this directly.

What Teleport does

Teleport moves rendered DOM to a different element while keeping the Vue component tree intact. So a modal can be defined inside a deeply nested component but its actual DOM lives at the bottom of the body, where it can sit above everything else without z-index gymnastics.

html<template>
  <button @click="open = true">Open</button>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <!-- modal contents -->
    </div>
  </Teleport>
</template>

Why this is better than the alternatives

Without Teleport, modals end up in the same overflow context as their parent. Hidden parent overflow? The modal gets clipped. Transformed parent? The modal positions wrong. With Teleport, the modal renders at the body level and sidesteps all of that.

And the component tree behaves normally — events bubble through the parent that defines the modal, even though the DOM is elsewhere. From a Vue perspective, the modal is still a child component.

When to skip it

Inline tooltips that should follow scroll, dropdowns inside scrollable containers, and any UI that should be clipped by its parent should not use Teleport. The point of Teleport is to escape layout — only use it when escaping is what you want.