---
title: "Vue Popup Examples | Mobiscroll"
component: "Popup"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/popup"
---

# Popup for Vue

Pop-over examples with customizable content, button configuration and behavior. For Vue JS. Last update: Oct 16, 2026

## Description

The popup provides a frame for all your pop-over needs, able to render custom content, forms or combined views.

Use it for contextual pop-ups, data entry or to inform users in a way that is consistent with all other Mobiscroll components.

It ships with features for a refined UX, including:

- Usage on mobile and desktop
- Combined views for various components
- Initialization on any custom content
- Consistent styling with all components
- Flexible button API
- Full theming support with light & dark variants
- Modal, popup, bubble and top/bottom display
- RTL support
- Button localization

## Using the popup

- [Opening closing the popup](https://demo.mobiscroll.com/vue/popup/showing-the-popover.md) - Vue popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more.
- [Understanding display modes](https://demo.mobiscroll.com/vue/popup/mobile-desktop-display.md) - Vue popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.
- [Configure buttons](https://demo.mobiscroll.com/vue/popup/button-configuration.md) - Vue popup component with different button configurations. Use it with or without buttons. Add custom actions.
- [Responsive](https://demo.mobiscroll.com/vue/popup/responsive.md) - Responsive Vue popup component. Change display modes and how the component renders across different screen sizes.

## Common use cases

- [Event creation modal](https://demo.mobiscroll.com/vue/popup/add-event-modal.md) - Use the Vue popup for event add/edit modals. Trigger within the event calendar component and load your own custom forms.
- [Using as a tooltip](https://demo.mobiscroll.com/vue/popup/show-hide-tooltip-hover-in-out.md) - Use the Vue popup with custom content on event hover within the various event calendar views.
- [Range picker with presets](https://demo.mobiscroll.com/vue/popup/range-picker-popup-presets.md) - Use the Vue popup to create advanced range picker components with presets and more.

## Customizing the look & feel

- [Theming capabilities](https://demo.mobiscroll.com/vue/popup/themes-ios-material-windows.md) - Vue Popup widget with iOS, Material, Windows look & feel. Customize colors and styling with theme builder.

## Lifecycle events

- [Lifecycle events](https://demo.mobiscroll.com/vue/popup/event-hooks.md) - Vue Popup demo with event hooks for custom integration and functionality. Use event handlers to customize flows.